How to update the data dynamically in vuejs?

<template>
  <div>
    <form>
      <label>Val:</label><br />
      <input type="text" id="val" name="val" v-model="item.val" /><br />
      <label>kk:</label><br />
      <input type="text" id="kk" name="kk" v-model="item.kk" /><br /><br />
      <input type="submit" value="Submit" @click="updatedata" />
    </form>
  </div>
</template>

<script>
export default {
  name: "User",
  data: function () {
    return {
      val: "",
      kk: "",
    };
  },
  methods: {
    updatedata() {
      val: this.item.val,
      kk: this.item.kk,
    },
  },
};
</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.kk }}
      </router-link>
    </div>
    <br /><br /><br />

    {{ $route.params.id }}
  </div>
</template>

<script>
import User from "./User.vue";
export default {
  name: "HelloWorld",
  components: {},
  data() {
    return {
      items: [
        { id: 1, val: "1", kk: "mm" },
        { id: 2, val: "22", kk: "aa" },
        { id: 3, val: "55", kk: "dd" },
        { id: 4, val: "77", kk: "gg" },
      ],
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>