One of the most common mistakes I see across Vue codebases is the misuse of `ref()`. You don't have to wrap every variable in `ref()`, only wrap it when you need reactivity. 💡

<script setup>
// this doesn't need to be wrapped in ref()
// no need for reactivity here
const links = [
  {
    name: 'about',
    href: '/about'
  },
  {
    name: 'terms of service',
    href: '/tos'
  },
  {
    name: 'contact us',
    href: '/contact'
  }
]

// isActive flag needs to be reactive to reflect UI changes
// that's why it's a good idea to wrap tabs into ref
const tabs = ref([
  {
    name: 'Privacy',
    url: '/privacy',
    isActive: true
  },
  {
    name: 'Permissions',
    url: '/permissions',
    isActive: false
  }
])
</script>

Write better Vue and Nuxt code.

One of the most common mistakes I see across Vue codebases is the misuse of `ref()`. You don't have to wrap every variable in `ref()`, only wrap it when you need reactivity. 💡

Write better
Vue and Nuxt code.