I am trying to set a flag that can be a boolean value true or false based on certain conditions.

// main.js
new Vue({
    el: `#app`,
    render: h => h(App,{
      props:{
        todoID: this.dataset.id
      }
    })
  })

my App script

export default {
  name: 'App',
  props: {
    todoID: String,
  },
  data() {
    return {
      isDone: false // here is the initial flag
    }
  },
  ...

I created a mixin method

import Vue from "vue";

Vue.mixin({
    methods: {
        isCompleted() {
            if (myconditions){
                this.isDone = true; // I want to change the flag to true
            }
        },
    },
});

in my template if I do {{isDone}} I always get false, how can I change this to be reactive so it can be changed based on the conditions?

Here is a demo I created: https://codesandbox.io/embed/vigorous-bell-p1itu?fontsize=14&hidenavigation=1&theme=dark