Electron+Vue.jsでのセレクトボックス作成時のエラー

前提・実現したいこと

Electron+Vue.jsでアプリケーションの開発を行っています。
Electronの利用は過去にあるのですが、Vue.jsの利用は初めてです。

現状セレクトボックスを追加して動的に変更するものを作りたいのですが、警告が出ていて表示されません。
色々調べてみたものの原因がわからないので教えていただきたいです。

発生している問題・エラーメッセージ

[Vue warn]: Property "selected" was accessed during render but is not defined on instance. 
[Vue warn]: Property "options" was accessed during render but is not defined on instance. 
[Vue warn]: Property "select" was accessed during render but is not defined on instance.

該当のソースコード

App.vue
1<template>
2  <div id="app">
3    
4    <table>
5      <tr>
6      　<td><p>選択肢</p></td>
7      　<td><select :value="select" v-model="selected">
8      　<option v-for="option in options" :value="option.value" :key="option.value">
9      　　{{ option.text }}
10      　</option>
11      　</select></td>
12      </tr>
13     </table>
14  </div>
15  
16</template>
17<script>
18export default {
19  name: 'buffa',
20  date(){
21    return {
22      selected: 'A',
23      options: [
24        { text: 'One', value: 'A' },
25        { text: 'Two', value: 'B' },
26        { text: 'Three', value: 'C' }
27      ]
28    }
29
30  },
31  props:{
32    
33  },
34  methods: {
35    
36  }
37};
38
39</script>
40<style>
41</style>