feat(runtime-core): check if the key is string

[pikax]

On the rc.5 I started getting errors because a symbol was used during render, because indexOf is not available on symbol.

This test is not representative on you will get this problem, but rather a way to trigger it.

The "errors" can be found CI build here (the first error is not related to this particular case) but exception is not being bubble up

after manually disabling the recursive vue-next log error:

    TypeError: key.indexOf is not a function

      at Object.get (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5422:17)
      at Proxy.render (eval at compileToFunction (packages/vue-composable/__tests__/utils.ts:85:18), <anonymous>:12:13)
      at renderComponentRoot (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:481:44)
      at componentEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4040:53)
      at reactiveEffect (node_modules/@vue/reactivity/dist/reactivity.cjs.js:46:24)
      at Object.effect (node_modules/@vue/reactivity/dist/reactivity.cjs.js:21:9)
      at setupRenderEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4032:38)
      at mountComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3990:9)
      at processComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3947:17)
      at patch (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3607:21)
      at render (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4675:13)
      at mount (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3106:25)
      at Object.app.mount (node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1197:23)
      at Object.mount (packages/vue-composable/__tests__/utils.ts:115:16)
      at Object.<anonymous> (packages/vue-composable/__tests__/misc/vmodel.spec.ts:87:8)

Code causing the issue

// composable
export function useVModel<TProps, PropName extends keyof TProps>(
  props: TProps,
  name: PropName
): Ref<TProps[PropName]>;
export function useVModel(props: Record<string, any>, name: string): Ref<any> {
  const instance = getCurrentInstance();
  if (!instance) {
    return ref() as any;
  }
  return computed({
    get() {
      return props[name];
    },
    set(v) {
      instance.emit(`update:${name}`, v);
    }
  });
}


// test using the composable , just checking if parent does get the actual update when using `test.value ='mounted'`

it("should replace prop", async () => {
    const comp1 = {
      props: {
        test: String
      },
      setup(props: { test: string }) {
        const test = useVModel(props, "test");

        onMounted(() => {
          test.value = "mounted";
        });

        return {
          test
        };
      },
      template: `<p>{{test}}</p>`
    };

    const test = ref("propTest");

    const vm = createVue({
      components: {
        comp1
      },
      template: `<comp1 v-model:test="test" />`,
      setup() {
        return {
          test
        };
      }
    });

    expect(test.value).toBe("propTest");
    vm.mount();
    await nextTick();

    expect(test.value).toBe("mounted");
  });

[rhengles]

Why do we want that opaque Property undefined was accessed during render but is not defined on instance. ?

I'm sure that that causes many people to be scratching their heads, just like I did!

It would be better if on runtime-core/componentPublicInstance.ts, on the function PublicInstanceProxyHandlers.get(), if the key is Symbol.unscopables, it would silently return undefined instead of printing that warning that is not the fault of the user!

Related: #2910