Issue when trying to dynamically update details in Vuejs?

<template>
  <div>
    <form @submit.prevent="updateData">
      <label>Val:</label><br />
      <input
        type="text"
        id="val"
        name="val"
        @input="val = $event.target.value"
        :value="currentItem.val"
      /><br />
      <label>kk:</label><br />
      <input
        type="text"
        @input="val = $event.target.value"
        id="kk"
        name="kk"
        :value="currentItem.kk"
      /><br /><br />
      <input type="submit" value="Submit" />
    </form>
  </div>
</template>

<script>
export default {
  name: "User",
  data: function () {
    return {
      val: "",
      kk: "",
    };
  },
  props: {
    items: {
      required: true,
      default: () => {},
    },
  },
  computed: {
    currentItem() {
      return this.items[this.$route.params.id] || {};
    },
  },

  methods: {
    updateData() {
      const updatedItems = [...this.items];
      updatedItems[this.$route.params.id] = {
        ...this.currentItem,
        val: this.val || this.currentItem.val,
        kk: this.kk || this.currentItem.kk,
      };
      this.$emit("update", updatedItems);
      this.$router.push("/");
    },
  },
};
</script>

<template>
  <div>
    <b>Vuejs dynamic routing</b>
    <div v-for="item in items" :key="item.id">
      <b>{{ item.id }}.</b> &nbsp;&nbsp;&nbsp;
      <router-link :to="{ name: 'UserWithID', params: { id: item.id } }">
        {{ item.val }} {{ item.kk }}
      </router-link>
    </div>
    <br /><br /><br />

    {{ $route.params.id }}
  </div>
</template>
 
<script>
import User from "./User.vue";
export default {
  name: "HelloWorld",
  components: {},
  props: {
    items: {
      required: true,
      default: () => {},
    },
  },
};
</script>

<template>
  <div id="app">
    <router-view @update="updateValue" :items="items"></router-view>
  </div>
</template> 

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      items: [
        { id: 0, val: "hi", kk: "mm" },
        { id: 1, val: "ggg", kk: "aa" },
        { id: 2, val: "ccccccccc", kk: "dd" },
        { id: 3, val: "zzzzzz", kk: "gg" },
      ],
    };
  },
  methods: {
    updateValue(value) {
      console.log("updating...");
      console.log(value);
      this.items = value;
    },
  },
};
</script>