title: Vue 3's equivalent to useEffect (React)
body: <p>This code is working, but I'm new to Vue.js and I can't help but think there's a cleaner way of doing this.</p>
  <p>In particular I mean the parts that set the data upon entrance and update (of store state) in case it's the first page you visit (or reload). I have a store that fetches data from the backend when the site loads, but that's probably obvious.</p>
  <p>I just feel like I'm repeating myself when calling <code>this.getTodo();</code> from both <code>watch</code> and <code>mounted</code>.</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h2&gt;Details Page&lt;/h2&gt;
      {{ title }}
      {{ content }}
      {{ lastEditTime }}
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        title: '',
        content: '',
        lastEditTime: ''
      }
    },
    methods: {
      getTodo () {
        if (this.$store.state.list.length &gt; 0) {
          const id = this.$route.params.id;
          const todoItem = this.$store.getters.getItem(id);
          Object.assign(this, todoItem);
        }
      }
    },
    watch: {
      '$store.state.list': {
        handler() {
          this.getTodo();
        }
      } 
    },
    mounted () {
      this.getTodo();
    }
  }
  &lt;/script&gt;
  </code></pre>