Vue Js Find Object in Array by Id

<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 Search Array of Objects by its Id</h2>
        <label for="employeeId">Enter Employee ID:</label>
        <input type="text" id="employeeId" v-model="searchId">
        <button @click="myFunction" class="btn btn-primary">Find Employee by ID</button>
        <p></p>
        <p>{{result}}</p>
    </div>
    <script type="module">
        import { createApp } from 'vue'
        createApp({
            data() {
                return {
                    employees: [
                        {
                            'id': '1',
                            'name': 'David',
                            'role': 'Web Developer'
                        },
                        {
                            'id': '2',
                            'name': 'Andrew',
                            'role': 'Frontend Developer'
                        },
                        {
                            'id': '3',
                            'name': 'Smith',
                            'role': 'Backend Developer'
                        }
                    ],
                    searchId: '2', 
                    result: null 
                }
            },
            methods: {
                myFunction() {
                    const idToFind = this.searchId.trim(); 
                    this.result = this.employees.find((employee) => employee.id === idToFind);
                }
            }
        }).mount('#app')
    </script>
</body>

</html>