[Vuejs]-Vue input dropdown simple

Actually it’s not that hard.

This HTML

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" v-model="iceCream" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

Can be achieved like that:

<template>
    <label for="ice-cream-choice">Choose a flavor:</label>
    <input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
    
    <datalist id="ice-cream-flavors">
        <option v-for="option in options" :value="option">{{option}}</option>
    </datalist>
</template>

<script>
export default {
    name: 'Example',
    data() {
        return {
            iceCream: '',
            options: [
                'Chocolate',
                'Coconut',
                'Mint',
                'Strawberry',
                'Vanilla',
            ]
        }
    }
}
</script>

I’ve never used this type of select field .. therefore I have no idea how it behaves (in relation to v-model binding)

BTW: Maybe a plugin component would be a better choice