Vue.js deepオプションについて

前提・実現したいこと

前提　Vue.js　deepオプションについて学習中
実現したいこと
deepオプションを用いてconsole上で下記のように実行したい。

console
>app.colors[1].name = 'white'
update!
new: [
    {
       "name": "Red"
    },
    { 
       "name": "White"
    },
    {
       "name": "Blue"
], oldValue: [
    {
       "name": "Red"
    },
    {
       "name": "White"
    }
    {
       "name": "Blue"
    }
]
"White"

発生している問題・エラーメッセージ

console
app.colors[1].name = 'white'
main.js:13 Update!
vue.js:597 [Vue warn]: Error in callback for watcher "colors": "ReferenceError: overValue is not defined"

(found in <Root>)
warn @ vue.js:597
logError @ vue.js:1739
globalHandleError @ vue.js:1734
handleError @ vue.js:1723
run @ vue.js:3233
flushSchedulerQueue @ vue.js:2981
(anonymous) @ vue.js:1839
flushCallbacks @ vue.js:1760
Promise.then (async)
microTimerFunc @ vue.js:1808
nextTick @ vue.js:1852
queueWatcher @ vue.js:3068
update @ vue.js:3207
notify @ vue.js:703
reactiveSetter @ vue.js:1020
(anonymous) @ VM4007:1
vue.js:1743 ReferenceError: overValue is not defined
    at Vue.handler (main.js:14)
    at Watcher.run (vue.js:3231)
    at flushSchedulerQueue (vue.js:2981)

    at Array.<anonymous> (vue.js:1839)
    at flushCallbacks (vue.js:1760)
logError @ vue.js:1743
globalHandleError @ vue.js:1734
handleError @ vue.js:1723
run @ vue.js:3233
flushSchedulerQueue @ vue.js:2981
(anonymous) @ vue.js:1839
flushCallbacks @ vue.js:1760
Promise.then (async)
microTimerFunc @ vue.js:1808
nextTick @ vue.js:1852
queueWatcher @ vue.js:3068
update @ vue.js:3207
notify @ vue.js:703
reactiveSetter @ vue.js:1020
(anonymous) @ VM4007:1
"white"

該当するソースコード

index.html

<html lang ="ja">
  <head>
    <meta charset="utf-8">
    <title>watch, deep</title>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <div id='app'>
     <ul>
       <li v-for= "color in colors">
         {{ color.name }}
       </li>
     </ul>
  </div>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

main.js

var app = new Vue({
  el: '#app',
  data: {
    colors: [
      { name: 'Red'},
      { name: 'Green'},
      { name: 'Blue'},
    ]
  },
  watch: {
    colors: {
      handler: function(newValue, oldValue) {
        console.log('Update!')
        console.log('new: %s, oldValue: %s', JSON.stringify(newValue, null, '\t'),JSON.stringify(overValue, null, '\t') )
      },
      deep: true
    }
  }
})