<script setup>
  const {reactive} = Vue
  
  const obj={deposit:1000};
  const reactiveObj=reactive({myName:'ming'});
  const showAlert=(input)=>{
    alert(JSON.stringify(input));
  }
</script>

<template>
  obj.deposit:{{obj.deposit}} <br>
  <input type="text" v-model="obj.deposit"><br>
  <button type="button" @click="showAlert(obj)">without reactive</button>
  <hr>
  reactiveObj.myName:{{reactiveObj.myName}} <br>
  <input type="text" v-model="reactiveObj.myName"> <br>
  <button type="button" @click="showAlert(reactiveObj)">with reactive</button>
</template>


<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
}
</style>