grimm.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<title>グリム童話</title>
</head>
<body>
<h2>グリム童話</h2><p />
<button id='aa' onclick="doAction(this.id)">
赤ずきん
</button>
<button id='bb' onclick="doAction(this.id)">
いばらひめ
</button>
<button id='cc' onclick="doAction(this.id)">
ラプンツェル
</button>
<button id='dd' onclick="doAction(this.id)">
七わのからす
</button>

<div id="app0">
<blockquote>
{{ title }}
</blockquote>
<p />
{{ text }}
</div>

<script src="grimm.js"></script>

<p />
Apr/23/2019 AM 08:25<p />
</body>
</html>

grimm.js

// ---------------------------------------------------------------
//	grimm.js
//
//						Apr/23/2019
//
// ---------------------------------------------------------------
var data_aa = {title: 'こんにちは。',
		text: 'テスト'}
new Vue (
{
	el: '#app0',
	data: data_aa 
})

// ---------------------------------------------------------------
function doAction(id){
switch(id)
	{
	case 'aa':
		title = '赤ずきん'
		text = '　むかし、あるところに、ちいさな、かわいい女の子がいました。だれでも、ひと目見ただけで、この子がすきになりましたが、なんといっても一ばんかわいがったのは、この子のおばあさんでした。'
		break

	case 'bb':
		title = 'いばらひめ'
		text = '　昔むかし、王さまとおきさきががおりました。ふたりは毎日、「子どもがほしい！子どもがいればな！」と、言い暮らしていましたが、いつまでたっても、ひとりもさずかりませんでした。'
		break

	case 'cc':
		title = 'ラブンツェル'
		text = '　むかし、あるところに、亭主とおかみさんがおりました。長いあいだ、子どもがほしいと願っていましたが、さずかりませんでした。'
		break

	case 'dd':
		title = '七のからす'
		text = '　むかし、ある男のひとに、むすこばかり、七人ありました。むすめをほしい、ほしいとねがってきたのですが、ひとりも、さずからなかったのです。'
		break

	}

	data_aa.title = title
	data_aa.text = text
}

// ---------------------------------------------------------------

実行結果

次のバージョンで確認しました。

Vue.js v2.6.14