this.$setとthis.$deleteが未定義のままになる

Question

どうやっても解決しなかったので、質問します。

自分がずっと開発に用いているVue CLIの環境ですが、どうやってもthis.$setとthis.$deleteというオブジェクト操作メソッドが使用できずに困っています。何が原因なのかご教授いただけたらと思います。

問題点

以下のエラーが出て、this.$setとthis.$deleteが使用できないために、オブジェクトの操作ができない。

runtime-core.esm-bundler.js?5c40:217 Uncaught TypeError: this.$set is not a function

なお、this.$emitや$event.target.checkedなどは普通に機能しています。

ソース

Test.vue (親コンポーネント)

<template>
		<div v-for="(chkval,idx) in checkboxes">
				<sub-tab :chkval="chkval" @fromc="receive" :key="idx" ></sub-tab>
		</div>
		<ul v-for="(result,idx) in results">
			<li key="result.id">{{result.name}}</li>
		</ul>
</template>
<script>
import Vue from 'vue'
import Sub from './Sub.vue'
export default{
	name: 'Test',
	components: {
		'sub-tab': Sub,
	},
	data(){
		return{
			checkboxes:[
				{id:1,name:'sapporo'},
				{id:2,name:'asahikawa'},
				{id:3,name:'hakodate'},
			],
			results: [],
		}
	},
	methods:{
		receive: function(chkval){
			console.log(this.$set)
			console.log(this)
			let vm = this
			let results = this.results
			//console.log(chkval)
			let len = this.checkboxes.length
			console.log(len)
			/*for(var i = 0; i< len ; i++ ){
				this.$set(results,i,this.checkboxes[i])
			}*/
			console.log(results)
			this.checkboxes.map((item,idx)=>{
						var vm = this

					let ary = {
						'id': item.id,
						'name': item.name,
					}
				if(chkval.checked === true && chkval.id === item.id){
					this.$set('results',ary) //未定義関数エラーが起きる
				}else{
					this.$delete(results,idx) //未定義関数エラーが起きる
				}
			})
			//console.log("*")
			console.log(results)
			this.results = results
		}
	},
}
</script>

Sub.vue(子コンポーネント)

<template>
	<label>
	{{chkval.name}}<input type="checkbox" :value="chkval.id" @input="inputVal(chkval.id,$event.target.checked)" >
	</label>
</template>
<script>
export default{
	props:[
		'chkval',
	],
	data(){
		return{
			dummy: []
		}
	},
	methods:{
		inputVal(id,flg){
			let vals = {
				"id": id,
				"checked": flg,
			}
			//this.$set(this.dummy,0,vals)
			this.$emit('fromc',vals)
		}
	},
}
</script>

試したこと

色々試したのですが、どれも解決には至っていません。

他の記述方法を試した

this.$setが使用できないので、マニュアルにしたがってVue.set、vm.$setも試してみたのですが、同様に関数ではないというエラーが出ます。

メソッド内でthisを代入してみた

以下のStackOverflowの議題の回答どおり、thisを代入してみたのですが、結局同じエラーとなりました。

TypeError: this.$set is not a function

import定義を付与してみた

main.jsとApp.vueとTest.vueそれぞれに

import Vue from 'vue

を記述してみたのですが、結局意味がありませんでした。また、メソッド内でconsole.log(Vue)とするとundefinedとなっていました。

mapをやめて、forでループしてみた

関数の内側なのが問題なのかと思い、forでも試してみたのですが、結局どこに置いてもエラーとなりました。また、子コンポーネントでもテストしたら、やはり認識エラーとなりました。

methods以外でテストしてみた

メソッドが問題なのではないかと考え、算出プロパティやライフサイクルフックでも試してみたのですが、やはり同じエラーとなります。

自宅の環境でテストしてみた

あれから自宅に戻り、自宅のVue操作環境でテストしたところ、普通に

console.log(Vue)
console.log(this.$set(array_test,0,"aaaaa")

が反応していました。なので、

import Vue from 'vue'

が反応していない状態のようですが、原因は何なんでしょうか。

Answer 1

Vue3にアップデートさせたのがそもそもの原因だったようです。
どうやらthis.$setとthis.$deleteはVue3に後方互換性がありません。かといって
compositionAPIを使用しないと、Vue3の代替記法

results[idx] = ary

delete retults[idx]

もリアクティブじゃないというエラーが生じてしまうので、根本的なcompositionAPIを用いた書き直しか、Vue2へのダウングレードが必要でした。