vue.jsのcomputedプロパティによるgetter,setterの実装について

Question

前提・実現したいこと

vue.jsを用いて、フォームに入力したフルネームを姓と名に分けて表示するリアクティブシステムを作成しています。
下記のコードは実行時正常に表示されますが、既に入力されている名前（下記コードの場合は" 太郎"）を消去すると、"テスト"という文字列が自動で補完されてしまいます。
この振る舞いに関して詳しい原因が分かる方がいらっしゃいましたら、ご教示いただきたいです。

該当のソースコード

<div id="app">
	<input type="text" v-model="fullName"/>
	<div>fullName :{{fullName}} </div>
	<div>firstName：{{firstName}}</div>
	<div>lastName ：{{lastName}}</div>
</div>

<script>
	let vm = new Vue({
		el : '#app',
		data(){
			return {
				firstName:'テスト',
				lastName:'太郎'
			}
		},
		//算出プロパティ
		computed:{
			fullName:{
				get(){
					return this.firstName + ' ' + this.lastName
				},
				set(val){
					let names = val.split(' ')
					this.firstName = names[0]
					this.lastName = names[names.length -1]
				}
			}
		}
	})
</script>

Answer 1

this.lastName = names[names.length -1]

でnames.length -1 が 0になるからでは？

Comments

[Den2884]

回答ありがとうございます。
names[1]になると思いこんでました。
おかげで解決することが出来ました。

Answer 2

                set(val){
                    let names = val.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[names.length -1]

「太郎」とその1つ前の半角スペースを削除すると　names = ['テスト']　になって
firstName もlastName も　 names[0]になるからじゃないですかね。

                    this.lastName = names.length > 1 ? names[names.length -1] : ""

としてみるとか？

Comments

[Den2884]

確かにそうですね。
splitの仕様をしっかりと把握出来ていませんでした。
代替案までいただきありがとうございました。