Add Two Numbers in Vue Js

in this tutorials will teach how to add two numbers in vue js.

Html

   <template>
    <div class="container">
      
      <h2>Add Two Numbers</h2>
    
        <div class="form-group">
          <label>Number 1</label>
          <input v-model="adddata.number1"  type="text" class="form-control">
         
        </div>
        <div class="form-group">
          <label>Number 2</label>
          <input  v-model="adddata.number2" type="text" class="form-control" >
        </div>
        <div class="form-group">
          <label>Total</label>
          <input  v-model="adddata.number2" type="text" class="form-control" >
         
          <h3>{{ total }}</h3>
    
        </div>
    </div>
    </template>

JS

<script>
    export default {
    name: 'AddNumber',
    data () {
      return {
         result: {},
          adddata:{
            number1: '',
            number2: ''
          }
      }
      
    },
    computed: {
           total:function()
         {
              return parseInt(this.task.num1) + parseInt(this.task.num2);
    
         }
    
      }
    
    }
    </script>

i have attached the video link below. which will do this tutorials step by step