Vue.js：多个输入中的v-model数组

我有一个附加了v模型的输入文本字段，每当有人单击“添加”按钮时，就会有另一个具有相同v模型的输入文本添加到DOM中。我以为我会得到一个v模型值的数组，但它只会得到第一个v模型输入的值：

<div id="app">
  <div id="references">
    <input v-model="references" type="text">
  </div>
  <button @click="addReference">Add</button>
</div>

我附加到dom的html由addReference方法触发：

addReference: function(e) {
  e.preventDefault();
  console.log(this.references);
  var inputEl = '<input v-model="references" type="text">';
  $('#references').append(inputEl);
}

这是Vuejs无法做到的吗？使用Vuejs从动态dom元素中收集值是否有其他方法？

new Vue({
  el: "#app",
  data: {
    references: "text"
  },
  methods: {
    addReference: function(e) {
      e.preventDefault();
      console.log(this.references);
      var inputEl = '<input v-model="references" type="text">';
      $('#references').append(inputEl);
    }
  }
})

input {
  display: block;
  margin: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
  <div id="references">
    <input v-model="references" type="text">
  </div>
  <button @click="addReference">Add</button>
</div>