[Vuejs]-How to make exported variables reactive in a Vue component?

by

3👍

✅

It’s not possible with value types because value types are passed by value (value is just copied). What you need is to pass a reference to an object…

counter.js

let counter = {
  total: 0
};
setInterval(function() {
  counter.total++;
}, 1000);
export default counter;

<template>
  <div>
    <h1>{{ counter.total }}</h1>
  </div>
</template>

<script>
import cnt from "@/counter";

export default {
  name: "HelloWorld",
  data() {
    return {
      counter: cnt
    };
  }
};
</script>
👤Michal Levý

Leave a comment