Enabling dynamic input in Vue.js vue-kanban plugin

Question

I am attempting to enable dynamic inputting to the Vue.js vue-kanban plugin (https://github.com/BrockReece/vue-kanban). So far, I have successfully created a method that pushes user input into a dynamically-created block, with a status set to "on-hold" so that the created block renders by default in the initial "on-hold" stage and then enabled for dragging and dropping into each stage. The issue is that I am stuck having to manually input the id of each block in addition to title. I would like each block to have a unique id without having to manually input one. Also, the console returns an error indicating that property or method of "title" is not defined on the instance but referenced during render. What is the best way to resolve both issues? Here is my code. Thanks!

//App.vue

<template>
  <div id="app">
    <div class="input-container">
      <input type="number" placeholder="id" v-model="id"/>
      <input type="text" placeholder="title" v-model="title"/>
      <button type="button" v-on:click="addBlock()">Add</button>
    </div>
    <kanban-board :stages="stages" :blocks="blocks">
      <div v-for="stage in stages" :slot="stage" :key="stage">
        <h2>{{ stage }}</h2>
      </div>
      <div v-for="block in blocks" :slot="block.id" :key="block.id">
        <div>
          <strong>id:</strong> {{ block.id }}
        </div>
        <div>
          {{ block.title }}
        </div>
      </div>
    </kanban-board>
  </div>
</template>

<script>
export default {
  name: 'app',
  id: null,
  title: null,
  data () {
    return {
      stages: ['on-hold', 'in-progress', 'needs-review', 'approved'],
      blocks: [],
    }
  },
  methods: {
    addBlock(){
      this.blocks.push({
        id: this.id,
        status: "on-hold",
        title: this.title
      });
      this.status = "";
      this.title = "";
    }
  }
}
</script>

<style lang="scss">
  @import './assets/kanban.scss';

  .input-container {
    width: 50%;
    margin: 0 auto;
  }
</style>

Answer 1

I would like each block to have a unique id without having to manually input one.

Maybe this will solve the problem.

<template>
  <div id="app">
    <div class="input-container">
      <input type="text" placeholder="title" v-model="title"/>
      <button type="button" v-on:click="addBlock()">Add</button>
    </div>
    <kanban-board :stages="stages" :blocks="blocks">
      <div v-for="stage in stages" :slot="stage" :key="stage">
        <h2>{{ stage }}</h2>
      </div>
      <div v-for="block in blocks" :slot="block.id" :key="block.id">
        <div>
          <strong>id:</strong> {{ block.id }}
        </div>
        <div>
          {{ block.title }}
        </div>
      </div>
    </kanban-board>
  </div>
</template>

<script>
export default {
  name: 'app',
  id: 0,
  title: null,
  data () {
    return {
      stages: ['on-hold', 'in-progress', 'needs-review', 'approved'],
      blocks: [],
    }
  },
  methods: {
    addBlock(){
      this.blocks.push({
        id: this.id,
        status: "on-hold",
        title: this.title
      });
      this.id += 1;
      this.status = "";
      this.title = "";
    }
  }
}
</script>