vue3でボタンをクリックしたらコンポーネントを表示したい

コンポーネントを作成し読み込むところまではできましたが、ボタンをクリックしたらコンポーネントのv-showの値をtrueに変更することで表示する方法がわかりません

該当のソースコード

index.blade.php
1    <div id="app">
2      <example-component></example-component>
3      <button @click="open">ボタン</button>
4    </div>

app.js
1require('./bootstrap');
2
3import { createApp } from 'vue'
4import ExampleComponent from './components/ExampleComponent.vue'
5
6createApp({
7    components: {
8        ExampleComponent
9    },
10    methods: {
11        open() {
12　　　ここでコンポーネントのインスタンスのactiveの値を変更したいがうまくいかない
13        }
14    },
15}).mount('#app')

ExampleComponent.vue
1<template>
2  <div class="container" v-show="active">
3    <div class="comment">{{ foo }}</div>
4  </div>
5</template>
6
7<script>
8export default {
9  mounted() {
10    console.log("Component mounted.");
11  },
12  data() {
13    return {
14      active: false,
15      foo: "bar",
16    };
17  },
18};
19</script>