Computed properties are not updated in production builds

Question

I have a computed property called wildcardItem which works when using a development build, but when I run a production build (mix --product) the property No more updates.

I'm using Laravel Mix to compile the code.

mix.setPublicPath('../')
    .js('js/app.js', 'dist/app.js')
    .vue()
    .postCss('css/app.css', 'dist/app.css', [
        require('postcss-import'),
        require('@tailwindcss/nesting'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .options({
        manifest: false,
    });

Component settings

const items = ref([]);
const query = ref('');

const wildcardItem = computed(_ => {
    console.log('Computing wildcard...');

    return {
        label: query.value,
    };
});

document.addEventListener('CustomEvent', function (event) {
    items.value = [
        ...event.detail.items,
        wildcardItem,
    ];
});

Component Template

<template>
    <div>
        <input v-model="query" />
        <div v-for="(item, index) in items" :key="`item-${index}`">
            {{ item.label }}
        </div>
    </div>
</template>

I also cannot see console.log when running with the production build.

#%2

Answer 1

compulated() returns a ref, so you need to use .value to unpack the value of ref:

document.addEventListener('CustomEvent', function (event) {
    items.value = [
        ...event.detail.items,
        //wildcardItem, ❌
        wildcardItem.value, ✅
    ];
});

Demo 1

Alternatively, you can use a reactive conversion , which does not require any expansion (no .value is required). Do not import ref and compulated, instead use $ref and $compulated (no import required):

sssccc

�