Computed inside reactive

[erwinheldy]

Is it ok to write code like this ?:

<script setup lang="ts">
import { computed, reactive } from 'vue'

const counter = reactive({
  count: 0,
  doubled: 0,
  increment: () => counter.count++,
})
counter.doubled = computed(() => counter.count * 2) as any
</script>


<template>
  <button @click="counter.increment">{{ counter.count }} * 2 = {{ counter.doubled }}</button>
</template>

It works, but are there any performance issues?

[s3xysteak]

It is ok but why not :

const counter = reactive({
  count: 0,
  doubled: computed(() => counter.count * 2),
  increment: () => counter.count++,
})

Less any less bug 😄