index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://unpkg.com/vue@2.6.14"></script>
<title>vue.js ex03</title>
</head>
<body>
<table>
<tr>
<td>
<div id="green">
  <button v-on:click="func01">Green</button>
	&nbsp;
  {{ counter_green }}
</div>
</td>

</tr>
<tr>
<td>
<div id="yellow">
  <button v-on:click="func01">Yellow</button>
	&nbsp;
  {{ counter_yellow }}
</td>
</div>
</tr>
<tr>

<td>
<div id="red">
  <button v-on:click="func01">Red</button>
	&nbsp;
  {{ counter_red }}
</div>
</td>
</tr>
</table>

<p />
<div id="clear">
  <button v-on:click="func01">Clear</button>
</div>

<script src="ex03.js"></script>
<p />
Aug/16/2018<p />
</body>
</html>

ex03.js

// ---------------------------------------------------------------
//	ex03.js
//
//					Aug/18/2018
//
// ---------------------------------------------------------------

green = new Vue({
	el: '#green',
	data: { counter_green: 0 },
	methods: {
	func01: function () { this.counter_green += 1 }
	}
})

yellow = new Vue({
	el: '#yellow',
	data: { counter_yellow: 0},
	methods: {
	func01: function () { this.counter_yellow += 1 }
	}
})

red = new Vue({
	el: '#red',
	data: { counter_red: 0},
	methods: {
	func01: function () { this.counter_red += 1 }
	}
})

new Vue({
	el: '#clear',
	data: {},
	methods: {
	func01: function () {
		 green.counter_green = 0
		 yellow.counter_yellow = 0
		 red.counter_red = 0
		 }
	}
})

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

実行の様子

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

Vue.js v2.6.14