Есть 2 списка в VUEJS с удаленными свойствами, один список работает, другой нет

Question

Я создал компонент в VueJS, который отображает два списка, один из которых пуст, и пользователь может нажать кнопку, чтобы добавить элемент, другой генерируется из массива с помощью подпрограмм в laravel. В обоих списках есть кнопка удаления для удаления нужного элемента. Проблема в том, что список, из которого заполняются элементы массива, не может быть удален

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)
    }
  }
})