fix: add warnings (#82)

* fix: add warnings

- invalid watch handler path
- attempting to mutate readonly computed value
- attempt of mutating public property
- attempt of mutating prop

* fix: more descriptive warnings + details

* fix: test apiOptions warnings

* fix: update warning in componentProxy

* fix: update warnings in componentProxy & apiOptions

* fix: update warning in componentProxy

* fix: implemented tests for componentProxy

* fix: remove comment + small refactor

packages/runtime-core/src/apiOptions.ts

@@ -267,7 +267,7 @@ export function applyOptions(
         if (isFunction(handler)) {
           watch(getter, handler as WatchHandler)
         } else if (__DEV__) {
-          // TODO warn invalid watch handler path
+          warn(`Invalid watch handler specified by key "${raw}"`, handler)
         }
       } else if (isFunction(raw)) {
         watch(getter, raw.bind(ctx))
@@ -275,7 +275,7 @@ export function applyOptions(
         // TODO 2.x compat
         watch(getter, raw.handler.bind(ctx), raw)
       } else if (__DEV__) {
-        // TODO warn invalid watch options
+        warn(`Invalid watch option: "${key}"`)
       }
     }
   }

packages/runtime-core/src/componentProxy.ts

@@ -4,6 +4,7 @@ import { instanceWatch } from './apiWatch'
 import { EMPTY_OBJ, hasOwn, globalsWhitelist } from '@vue/shared'
 import { ExtractComputedReturns } from './apiOptions'
 import { UnwrapRef } from '@vue/reactivity'
+import { warn } from './warning'
 
 // public properties exposed on the proxy, which is used as the render context
 // in templates (as `this` in the render option)
@@ -91,10 +92,16 @@ export const PublicInstanceProxyHandlers = {
     } else if (hasOwn(renderContext, key)) {
       renderContext[key] = value
     } else if (key[0] === '$' && key.slice(1) in target) {
-      // TODO warn attempt of mutating public property
+      __DEV__ &&
+        warn(
+          `Attempting to mutate public property "${key}". ` +
+            `Properties starting with $ are reserved and readonly.`,
+          target
+        )
       return false
     } else if (key in target.props) {
-      // TODO warn attempt of mutating prop
+      __DEV__ &&
+        warn(`Attempting to mutate prop "${key}". Props are readonly.`, target)
       return false
     } else {
       target.user[key] = value