Vue Js get value of selected option of Dropdown

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
      <h3>Vue js Get Selected Option Value from Dropdown</h3>
        <label for="my-dropdown">Select a fruit:</label>
        <select id="my-dropdown" v-model="selectedFruit">
            <option disabled value="">Please select one</option>
            <option v-for="(fruit, index) in fruits" :key="index" :value="fruit.value">{{ fruit.label }}</option>
        </select>
        <p>The selected fruit is: {{ selectedFruit }}</p>

</div>

label {
            margin-bottom: 10px;
        }

select {
            font-size: 16px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }

option[disabled] {
            color: #999;
        }

p {
            font-size: 18px;
            font-weight: bold;
        }
    </style>
</body>

</html>