Property or method "isOpen" is not defined on the instance but referenced during render

I am relatively new to vue.js. I am trying to create a modal dialog that has an initial displayed state set to false. This dialog is used in another component as shown below. I cannot figure out why the data option's isOpen variable is undefined

// My main component is here
<template>
 <button @click="openMyModal">Open</button>
 <MyDialog ref="dialog"/>
</template>
<script>
...
methods: {
 openMyModal(){
    this.$refs.dialog.open().then((confirm) => {
          console.log("confirm", confirm)
          return true
        }).catch();
 }
}
...
</script>

<template>
  <div class="overlay" v-if="isOpen">
    <div class="modal">
     <h1>My modal dialog here</h1>
    </div>
   </div>
 </div>
</template>
<script>
export default {
    name: 'my-dialog'
}
 data () {
      return {
        isOpen: false
        ...
      }
 }
 methods() {
  open() {
        this.isOpen = true;
        ...
      },
  close() {
        this.isOpen = false;
      },
}
</script>

It is mostly because of syntax errors. Here is an example after debugging your code:

In the parent:

methods: {
    openMyModal() {
      this.$refs.dialog.open();
    }
}

In the child:

export default {
  name: "my-dialog",
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    open() {
      this.isOpen = true;
    },
    close() {
      this.isOpen = false;
    }
  }
};