Vue.Js show image in popup

<div id="app">
  <button @click="toggleDialog()" >Show Popup Image</button>
  <p></p>
  <div class="dialog" v-if="dialog">
    <div class="dialog-content">    
    <button @click="toggleDialog()" class="close-icon" >x</button>
    <img :src="imageSrc">
    </div>
  </div>
</div>

createApp({
    data() {
      return {
        imageSrc: "https://www.sarkarinaukriexams.com/images/editor/1670265927Capture123243243423.PNG",
        dialog: false,
        }
    },
  methods:{
  toggleDialog(){
   this.dialog = !this.dialog;
  }
  }
  }).mount('#app')
</script>
<style>
  .dialog {
    position: fixed;
    top: 0px;    
    left: 0px;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    background: rgba(0,0,0,0.5);
    border: 1px solid #999;
  }
  .dialog-content {
    width: 400px;
    height: auto;
    margin: 0 auto;       
    padding: 10px;
    margin-top: 20px;
  }
  .dialog-content img {
    width: 100%;
    height: auto;
  }
  .close-icon {
    float: right;
  }
</style>