Vue.js 克隆元素并附加到 DOM 的正确方法

我有一个HTML输入字段来输入一些信息:

<div id="fruitForm">
    <div class="inputArea">
        <label for="fruit0">Enter Fruit Name</label>
        <input id="fruit0"></input>
    </div>
</div>
<button @click="newInputField">Add More Fruit Input Fields</button>
<button @click="submit">Submit Fruit</button>

然后单击事件I处理:

export default {
    data() {
        return {

        }
    },
    methods: {
        newInputField() {
            //Create another input area for users to input fruits
        },
        submit() {
            //Do something here
        }
    }
}

当用户 Select Add More Fruit Input Fields按钮时，它应该创建一个新的输入区域，以便HTML如下所示:

<div id="fruitForm">
    <div class="inputArea">
        <label for="fruit0">Enter Fruit Name</label>
        <input id="fruit0"></input>
    </div>

    <div class="inputArea">
        <label for="fruit1">Enter Fruit Name</label>
        <input id="fruit1"></input>
    </div>
</div>
<button @click="newInputField">Add More Fruit Input Fields</button>
<button @click="submit">Submit Fruit</button>

现在，我一直在通过vanilla Javascript使用传统的DOM操作方法来实现这一点...诸如此类:

const inputArea = document.getElementsByClassName('inputArea');

然后我更改输入字段的id，然后使用appendChild将新的输入字段添加到DOM中.

问题:我的VUIshould是如何克隆的？我觉得我没有用这种方式来处理这件事.我应该像列表一样处理这个问题并使用v-for吗？还是别的什么？