feat(runtime-core): warn against user properties with reserved prefixes

packages/runtime-core/src/componentOptions.ts

@@ -417,6 +417,7 @@ export function applyOptions(
       for (const key in rawData) {
         checkDuplicateProperties!(OptionTypes.DATA, key)
         // expose data on ctx during dev
+        if (key[0] !== '$' && key[0] !== '_') {
           Object.defineProperty(ctx, key, {
             configurable: true,
             enumerable: true,
@@ -426,6 +427,7 @@ export function applyOptions(
         }
       }
     }
+  }
 
   if (computedOptions) {
     for (const key in computedOptions) {

packages/runtime-core/src/componentProxy.ts

@@ -195,11 +195,20 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
     ) {
       return globalProperties[key]
     } else if (__DEV__ && currentRenderingInstance) {
+      if (data !== EMPTY_OBJ && key[0] === '$' && hasOwn(data, key)) {
+        warn(
+          `Property ${JSON.stringify(
+            key
+          )} must be accessed via $data because it starts with a reserved ` +
+            `character and is not proxied on the render context.`
+        )
+      } else {
         warn(
           `Property ${JSON.stringify(key)} was accessed during render ` +
             `but is not defined on instance.`
         )
       }
+    }
   },
 
   set(
@@ -280,7 +289,15 @@ export const RuntimeCompiledPublicInstanceProxyHandlers = {
     return PublicInstanceProxyHandlers.get!(target, key, target)
   },
   has(_: ComponentRenderContext, key: string) {
-    return key[0] !== '_' && !isGloballyWhitelisted(key)
+    const has = key[0] !== '_' && !isGloballyWhitelisted(key)
+    if (__DEV__ && !has && PublicInstanceProxyHandlers.has!(_, key)) {
+      warn(
+        `Property ${JSON.stringify(
+          key
+        )} should not start with _ which is a reserved prefix for Vue internals.`
+      )
+    }
+    return has
   }
 }