VueをTypeScriptに書き換えるとリアクティブにならない。。

お世話になります。
VueをTypeScriptにする練習をしているのですが、解説などを見て、dataの部分をTypeScriptのクラスのメンバ変数として定義してみたのですが、上の「Vue」の内容だとテキストエリアに入れた内容が即時、

HTML
1 <p>{{ message }}</p>

のところに反映されるのですが、sciptの部分をTypeScriptに下段に記述したように直すと、リアクティブに反応しないようです。。。これは何が悪いのでしょうか。。

Nuxtでやってるので、yarn dev 即ち nuxt-ts コマンドでビルドして確認しています。

下記Vueのコード

Vue
1<template>
2  <div class="message">
3    <div class="message-area">
4      <p>{{ message }}</p>
5    </div>
6    <hr>
7    <textarea v-model="message" cols="30" rows="10" />
8  </div>
9</template>
10
11<!-- ---以下の部分をTypeScriptに書き換えます。--- -->
12
13<script>
14export default {
15  name: 'Message',
16  data: () => {
17    return {
18      message: 'Enter expressiton:'
19    }
20  }
21}
22</script>

この<script>タグ内を下記に差し替えるとリアクティブに動きません。。

TypeScript
1<script lang="ts">
2import { Vue } from 'vue-property-decorator'
3
4export default class Message extends Vue {
5  message: string = 'Enter expression:'
6}
7</script>

何卒宜しくお願い致します。

miyabi_pudding

2020/01/22 02:37

下のTypeScriptの記述はコンパイルないしビルドはしてますか？通常のHTMLでは、TypeScriptを使用することはできません。 TypeScriptで開発しているのであれば、Vue-CLIを使っているか否かも質問に記載したほうがいいかと。

sutefu23

2020/01/22 02:55

ご回答＆ご指摘ありがとうございます。すみません。追記します。 nuxtでやっており、yarn dev 即ち nuxt-ts コマンドでビルドしています。

miyabi_pudding

2020/01/22 02:58

となると、、、ビルドした上で動かない、ということですね？その点も含め詳しく、状況やVueのバージョンなども含め質問本文に記載しましょう。質問は編集が可能です。

sutefu23

2020/01/22 03:02

ご指摘ありがとうございます。詳しく調べて編集します。

行動規範の内容に同意します

回答2件

自己解決

gitに乗っていたNuxt + TypeScriptのソースコードと比較して解決しました。

単純に

TypeScript
1import { Vue } from 'vue-property-decorator'
2
3export default class Message extends Vue {
4  message: string = 'Enter expression:'
5}

にアノテーション@Component

import { Component , Vue } from 'vue-property-decorator'

@Component
export default class Message extends Vue {
  message: string = 'Enter expression:'
}

をつけたら解決しました。。
お恥ずかしいです。。

ビルドが通ったのでなくて行けると思ってしまいました。。

大変お騒がせしました。

投稿2020/01/22 07:24

sutefu23

総合スコア11