Vue Replace String

<!DOCTYPE html>
<html>

<head>
    <script type="importmap">
        {
            "imports": {
                "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
            }
        }
    </script>
</head>

<body>
    <div id="app">
        <h2>Vue js String Replace Method</h2>
        <p>Replace Character with given text</p>
        <button @click="myFunction">click me</button>
        <p>Text: {{string}}</p>
        <p>New Text: {{results}}</p>
    </div>
    <script type="module">
        import { createApp } from 'vue'
        createApp({
            data() {
                return {
                    string: 'This is an awesome site that provides icons and tutorials for Vue and React. The sites name is Fontawesomeicons',
                    character: 'website',
                    results: ''
                }
            },
            methods: {
                myFunction() {
                    // Replace all occurrences of 'site' with 'website' in 'string'
                    this.results = this.string.replaceAll('site', this.character);
                }
            }
        }).mount('#app')
    </script>
</body>

</html>