Propsを更新する作法


#1

コンポーネントにpropsを設定し、それを上位側から後々更新することはできないでしょうか。

以下のコードの「// ここでサブタイトルを更新したい」というところでデータ更新し、画面に反映したいですが、どのようにしてよいか分からない状況です。

抜粋:
main.js

import Vue from "vue";
import App from "./App";

Vue.config.productionTip = false;

let a = "サブタイトル";

new Vue({
  el: "#app",
  render: createElement => {
    return createElement(App, {
      props: { subtitle: a }
    });
  }
});

// ここでサブタイトルを更新したい
setTimeout(() => {
  a = "更新";
}, 1000);

App.vue

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <h1>{{subtitle}}</h1>
  </div>
</template>

<script lang="ts">
import Component from "vue-class-component";
@Component ({
  props: { subtitle: String }
})
export default class App {
  subtitle: string;
};
</script>

<style>
...
</style>

ご教示いただければ幸いです。


#2

こうじゃないでしょうか


#3

dataを使い、生成したvmオブジェクトからアクセスすればよいのですね。
ご教示いただき、誠にありがとうございます。