<template>
    <div>
        <h3>Addition Calculator</h3>
        First:
        <input type="number" v-model="num1">
        <br/>
        Second:
        <input type="number" v-model="num2">
        <p><strong> +  = </strong></p>
    </div>
</template>

<script>
import { ref } from '@vue/composition-api';

export default {
    name: 'AddComposition',
    setup() {
        let num1 = ref(0);
        let num2 = ref(0);

        let sum = ref(num1.value + num2.value);
        watchEffect(() => sum.value = num1.value + num2.value);

        return {
            num1,
            num2,
            sum
        }
    }
}
</script>