Select

select.vue

<template>
    <Painel titulo="Resumo" roxo>
       <select v-model="selected">
           <option v-for="option in produtos" 
           :key="option.preco"
           v-bind:value="option.value">
               {{ option.nome }}
            </option>
        </select>
        <span>Selecionado: {{ selected }}</span>
</Painel> 
</template>

<script>
export default {
    watch: {
        selected(valor1, valor2)
        {
            console.log('Antes era:', valor2)
            console.log('Agora é:', valor1)
        }
    },
    data() {
        return {
            selected: 1,
            produtos: [
                { nome: 'Produto 1', quantidade: 7, preco: 14.55, value: 1 },
                { nome: 'Produto 2', quantidade: 10, preco: 22.99, value: 2},
                { nome: 'Produto 3', quantidade: 1, preco: 43.18, value: 3 },
            ]
        }
    }
}

</script>

<style>
    table {
        width: 100%;
    }

    td {
        border-top: 1px solid #EEE;
        width: 33%;
    }
</style>