在VUEJS中有2个具有删除属性的列表，一个列表有效，另一个不

Question

我在VueJS中制作了一个组件，该组件呈现两个列表，一个列表为空，用户可以按按钮添加一个项，另一个列表通过laravel中的props从数组生成。两个列表都有一个删除按钮以删除所需的项目。问题是无法删除从数组中的项目填充到的列表

import './bootstrap'
import Vue from 'vue'

Vue.component('admin-cms-document',{
  template:
  `<div>
    <div v-if="files">
    <ul class="list-unstyled">
      <li v-for="(file, index) in files">
        <p>{{file.id}}</p>
        <button type="button" @click="deleteFile(index)">Delete</button>
      </li>
    </ul>
    </div>
    <div v-else>
      <ul class="list-unstyled">
        <li v-for="(input, index) in inputs">
          <input type="file" name="docs[]" @change="input.one">
          <button type="button" @click="deleteNewFile(index)">Delete</button>
        </li>
      </ul>
      <button type="button" @click="addRow">Add</button>
    </div>
  </div>`,

  props: {
    files: Array
  },

  data: function() {
    return {
      inputs: [],
      files: []
    }
  },

  methods: {
    addRow() {
      this.inputs.push({
        one: '',
      })
    },
    deleteNewFile(index) {
      this.inputs.splice(index,1)
    },
    deleteFile(index) {
      this.files.splice(index, 1)
    }
  }

});

var app = new Vue({
  el: '#app',

  data: {
    inputs: [],
  },

  methods: {
    addRow() {
      this.inputs.push({
        one: '',
      })
    },
    deleteNewFile(index) {
      this.inputs.splice(index,1);
    },
    deleteFile(index) {
      this.files.splice(index, 1)
    }
  }
})