How to implement variable double-side bind across .vue file and .ts file?

[Richard20230331]

Say I have a .vue file and a .ts file, and I wish to bind a variable in .vue file to another variable in .ts file. In such situation, I can see the variable in .vue changes automatically(responsively) while I make changes to the variable in .ts file, and vice versa.

Example: I want to bind refVariable and tsVariable responsively, one can change responsively when the other one changes.
.vue
…
< div > {{refVariable}} < /div >
…
let refVariable = ref(‘’);

.ts
let tsVariable = ‘aaa’;

P.S. I think that Pinia maybe a good choice? But I have like hundreds of such variables to work with, and thus I have to create a lot of stores, I wonder if it would slow my program down.