Vue Js Array Find Index by Value

<html>

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

<body>
    <div id="app">
        <h2>Vue js array.indexof() function from object</h2>
        <button @click='myFunction'>Find Index of Austalia </button>
        <p></p>
        <p v-if="result !== ''">The Index of Australia is: {{ result }}</p>
    </div>
    <script type="module">
        import { createApp } from 'vue'
        createApp({
            data() {
                return {
                    countries: [
                        {
                            'countryName': 'Australia',
                            'capitalName': 'Canberra'
                        },
                        {
                            'countryName': 'England',
                            'capitalName': 'London'
                        },
                        {
                            'countryName': 'India',
                            'capitalName': 'New Delhi'
                        },
                    ],
                    result: ''
                }
            },
            methods: {
                myFunction() {
                    this.result = this.countries.map((country) => country.countryName).indexOf('Australia')
                },
            }
        }).mount('#app')
    </script>

</body>
</head>

</html>