Vue是一款漸進式JavaScript框架，它旨在幫助開發者更好地構建優秀的web應用。Vue的核心思想是“數據驅動視圖”，也就是說當我們修改數據時，視圖也會隨之改變。

Vue的數據驅動模型讓我們可以很方便地修改數據以更新視圖，不過有時候我們需要修改的數據不是在組件內部的data中，而是要修改外部的數據。此時我們可以使用Vue提供的實例方法來實現這一目的，例如使用$emit方法向父組件傳遞數據或使用$refs獲取子組件并修改它的數據。

// 子組件
<template>
<div>
<h1>{{count}}</h1>
<button @click="addToCount">增加計數器</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
addToCount() {
this.count += 1;
// 用$emit方法向父組件傳遞數據
this.$emit('add', this.count);
}
}
}
</script>

在上面的代碼中，我們定義了一個子組件，該組件包含一個計數器并且有一個增加計數器的按鈕，點擊按鈕會讓計數器加1，并且用$emit方法將當前的計數器值傳遞給父組件。

// 父組件
<template>
<div>
<h1>{{text}}</h1>
<child-component @add="handleAdd" ref="child"></child-component>
</div>
</template>
<script>
import childComponent from './childComponent.vue';
export default {
components: {
childComponent
},
data() {
return {
text: 'Vue修改外部data'
}
},
methods: {
handleAdd(count) {
// 用$refs獲取子組件并修改它的數據
this.$refs.child.count = count;
}
}
}
</script>

在父組件中，我們引入了子組件，并使用$refs獲取子組件實例，然后在處理子組件傳遞的數據時，使用$refs來訪問子組件實例的count屬性并將它的值修改為傳遞過來的值。

除了$emit和$refs之外，Vue還提供了其他方式來訪問和修改外部數據，這取決于外部數據的定義方式以及它的作用域。在使用這些方法時需要注意作用域和數據類型，避免出現修改不成功或者出錯的情況。

總之，Vue的數據驅動視圖模型可以幫助我們更加快速和方便地開發web應用，而通過學習和掌握Vue提供的實例方法，我們可以更加自如地修改外部數據，讓我們的應用更加靈活和高效。