Vue.js オブジェクト型の値更新タイミングについて

Question

前提・実現したいこと

独学でVue.jsを学習しながら入力画面を作っています。
エラー変数の初期化→エラーチェックの順でオブジェクト型の変数を更新したいと考えております。
データが代入されたかどうか確認するために、console.logを利用して確認を行っております。
知見が浅くプロパティを指定したときとオブジェクトを指定したときで表示が異なる理由が分からず困っております。
「何故cosole.logで出力時に想定していた内容で出てこないのか？」をご教授いただければ幸いです。

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

zipcodeの出力結果がisError:false,messages:nullと表示されない理由が知りたいです
プロパティを個別で指定してconsole.logを行うと初期化されていることが分かりましたが、オブジェクト指定で出力した場合と内容が異なっており正常に初期化されているのか分からないため表示が異なる理由が知りたいです。

// 結果
エラー初期化
false
null
{
　zipcode: {
　　isError:true, 
　　messages:Array(1)
　　 0: '郵便番号から住所を取得できませんでした。'
  }
}

該当のソースコード

<template>
 <div id="app">
  <input type="text" v-model="address.zipcode">
  <button @click="search">検索</button>
  <!-- 省きます -->
 </div>
</template>
<script>
export default {
 data(){
  return {
   address:{
    zipcode: "",
    address1: "",
    address2: "",
   },
   error: {
    zipcode: {isError:false, messages:null},
    address1: {isError:false, messages:null},
    address2: {isError:false, messages:null},
    },
   }
 },
  methods: {
    search(){
     // エラー変数初期化
     this.errorInitialization('zipcode');
     // データ取得ロジック
     // エラーメッセージの追加
     this.errorAddMessage('zipcode','郵便番号の住所を取得できませんでした');
    },
    errorInitialization(errorTarget){
        // エラー初期化
        console.log('エラー初期化');
        this.$set(this.error[errorTarget],'isError',false);
        this.$set(this.error[errorTarget],'messages', null);
        // データが初期化されたか確認
        console.log(this.error[errorTarget].isError);
        console.log(this.error[errorTarget].messages);
        // console.logした結果は初期化されていない
        console.log(this.error);
    },
    errorAddMessage(errorTarget,message){
     // エラーメッセージの追加
     this.$set(this.error[errorTarget],'isError',true);
     this.$set(this.error[errorTarget],'messages',[...this.error[errorTarget].messages??'',message]);
    },
  }
}
</script>

試したこと

色々とネットで調べてみましたが、納得のいく内容が見つかりませんでした。
this.error[errorTarget].isError=false;という風に直接代入を行っておりましたが、Vue.$setに変更してみました。現象は変わりませんでした

補足情報（FW/ツールのバージョンなど）

Vue.js 2.5.17

Comments

[ku__ra__ge]

質問として提示するコードは、文法エラーが出ないものを提示してください。

[ya_penguin]

ご指摘ありがとうございます。単一コンポーネントとして動くように変更致しました

Answer 1

ちゃんと初期化されています。
ブレークポイントをつけて確認してみてください。
https://teratail.com/questions/61338#reply-97357

Comments

[ya_penguin]

ご回答ありがとうございます。
console.logの詳しい動きが理解できました
console.logの実行時点の内容ではないのですね。
よく書籍にはconsole.logで内容を確認していくものが多くデバッグ時もconsole.logを利用していましたが
Array Object等は、ブレイクポイントを活用するようにしなくてはいけませんね
大変勉強になりました。ありがとうございます。

Answer 2

zipcodeの出力結果がisError:false,messages:nullと表示されない

zipcodeという名前のデータは、address.zipcodeとerror.zipcodeの2つ定義されています。

console.logで初期化されていることを確認しているのはerror.zipcodeです。
<input type="text" v-model="address.zipcode">で表示しているのはaddress.zipcodeです。
この2つは異なるデータなので、前者が正しく初期化されていても、後者にその値が表示されることはありません。

以下のようなテンプレートを表示すれば、画面に{ "isError": false, "messages": null }と表示されます。

<template>
  <div id="app">
    {{ error.zipcode }}
  </div>
</template>

Comments

[ya_penguin]

ご回答ありがとうございます。
質問の意図がわかりずらく申し訳ございません。
何故cosole.logで出力時に想定していた内容で出てこないのか？が知りたかったので表示の箇所は考慮しておりませんでした。
デバッグで直接表示させるだけで内容が分かるものは、ku__ra__ge様の記述いただいた内容も活用します。
大変勉強になりました。ありがとうございます。