[Vuejs]-Deleting rows from table in vue.js not working properly

Vue.config.productionTip = false;
Vue.use(BootstrapVue);

new Vue({
  template: "#main",
  data() {
    return {
      text: "",
      items: [],
      index: 1
    };
  },
  methods: {
    addRow(text) {
      this.items.push({
        text: text || this.text,
        index: this.index++,
        file: null
      });
    },
    removeRow(index) {
      this.items = this.items.filter(item => item.index !== index);
    }
  },
  mounted() {
    this.addRow("Foo");
    this.addRow("Bar");
    this.addRow("Fus");
    this.addRow("Ro");
    this.addRow("Dah");
  }
}).$mount("#app");

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">Vue App</div>

<script type="text/x-template" id="main">
  <div>
    <input v-model="text" />
    <button @click="addRow()">Add</button>
    <table class="table">
      <tbody>
        <tr v-for="item in items" :key="`file-row-${item.index}`">
          <td>{{item.text}}</td>
          <td>{{item.index}}</td>
          <td><b-form-file v-model="item.file" accept=".pdf"></b-form-file></td>
          <td><button @click="removeRow(item.index)">x</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</script>