Discussion on: Thought on Vue 3 Composition API - `reactive()` considered harmful

[Vitaly Dub]

Have you considered this way of working with "reactive"? In my opinion it's better than use .value but have all the best of "ref" kind of declaration

<template>
    <div id="app">
        <input v-model="val" />
        {{ $val }}
    </div>
</template>

<script>
import {reactive, computed} from "vue";

export default {
    setup () {
        const state = reactive({});

        state.val = "abc";
        state.$val = computed(() => `--${state.val}--`);

        state.arrayVal = []; // array is reactive and you can reassign it

        return state;
    },
};
</script>

[YCM Jason]

Yes. I actually proposed that to Evan before too. But after actually using the composition API, I was surprised to find ref much more natural to use. Having said that, using a state object is totally valid pattern tho!