// @input 을 @change="msg = $event.target.value" />  로 바꿔준다.
// 수정 후에 더이상 포커싱 되지 않거나 엔터키를 치면 바뀐다.
// 또는 v-model.lazy 를 사용 할 수 있다.
<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    v-model.lazy="msg" />
</template>

<script>
export default {
  data() {
    return {
      msg: 123
    }
  },
}
</script>

// 위에서 123 이라는 넘버 데이터를 넘겨주지만 msg 에 넣을때, 사용자가
// 입력한 값은 문자열이 되서 돌아온다.
v-model.number="msg"
// 이제 number 로 받아진다.

// trim 공백제거

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    v-model.trim="msg" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world'
    }
  },
  watch: {
    msg() {
      console.log(this.msg)
    }
  }
}
</script>