Both computed and reactive not working with imported variables (Composition API)

[tomassimanaitis]

Version

3.2.18

Reproduction link

codesandbox.io

Steps to reproduce

test.js file -

export const test = { count: 0 };
export const incrementTest = () => test.count++;

component's file -

<script setup>
import { reactive } from "vue";
import { test, incrementTest } from "./test.js";

const reactiveTest = reactive(test);
setInterval(() => console.log(reactiveTest.count), 3000);
const increment = () => incrementTest();
</script>

<template>
  <h2>{{ reactiveTest.count }}</h2>
  <button @click="increment">Increment</button>
</template>

I can see that reactiveTest.count is updating in the setInterval function, but template re-rendering isn't working. Tried this with ref, reactive, computed or mixing reactive and computed together - still nothing.

Maybe I'm missing something? There are many cases when I need to use imported variable from some plain js file that doesn't use any of the Vue app functionality like composition API or mixins.

What is expected?

Vue template update on imported variable change.

What is actually happening?

Vue template does not update on variable change

[posva]

Tou need to modify the object returned by reactive. Never the original ones.