프로젝트가 굉장히 커지면 관련된 데이터들의 정의된 부분과 함수들을 찾기가 매우 힘들어진다.
하나의 methos 에도 굉장히 많은 함수가, computed 안에도 뒤죽박죽으로 섞여있을 수 있기 때문이다.

이를 해석하기 좋은 형태로 개선 시킬 수 있다.
관련 있는 동작과 데이터끼리 모아놓을 수 있다.

// 기존 방식
<template>
  <h1 @click="increase">
    {{ count }} / {{ doubleCount }}
  </h1>
  <h1>
    {{ message }} / {{ reverseMessage }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello world',
      count: 0
    }
  },
  computed: {
    dobleCount() {
      return this.count * 2
    },
    reverseMesasge() {
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    increse() {
      this.count += 1
    }
  }
}
</script>

// Composition vue
<template>
  <h1 @click="increase">
    {{ count }} / {{ doubleCount }}
  </h1>
  <h1>
    {{ message }} / {{ reversedMessage }}
  </h1>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    **// message 관련**
    const message = ref('Hello World!')
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('')
    })

    **// count 관련**
    const count = ref(1)
    const doubleCount = computed(() => count.value * 2)
    function increse() {
      count.value += 1
    }

    return {
      message,
      reversedMessage,
      count,
      doubleCount,
      increse
    }
  }
}
</script>