Reactivity with Vue 3

Extensive usage of two-way binding in components.

Example

<script setup>
import { computed } from 'vue'

const post = defineModel('post')

function onLike() {
  post.is_liked = !post.is_liked // this will emit an event with the updated post
}
</script>

<template>
  <div>
    ...
  <div>
</template>

If the value is coming from a list, don't forget to pass the reference and not the object:

<script setup>
import { computed } from 'vue'

const posts = defineModel('posts')
</script>

<template>
  <Post
    v-for="(post, index) in posts"
    :key="post.id"
    v-model="posts[index]"
  />
</template>