<template>

      <div>

          <h1>{{count}}</h1>

          <h1>{{double}}</h1>

          <button @click="increase">+1</button>

      </div>

</template>

<script lang="ts"> 

import { ref,computed,reactive, toRefs } from ‘vue‘;    

interface DataProps {

  count:number;

  double:number;

  increase: () => void;

}

export default {

  name: ‘App‘,

  setup(){

 

    const data:DataProps = reactive({

      count:0,

      increase:() => { data.count ++ },

      double:computed(() =>  data.count * 2 )

    })

    const refData  = toRefs(data)

    return {

      ...refData 

    }

  

  } 

};

</script>