updated README.md

Author: infinite-system

README.md

@@ -16,9 +16,9 @@ const instance = getCurrentInstance()
 ```
 In `<template>` add:
 ```html
-<vue-dd name="setupState" v-model="instance.setupState" max-height="300px" />
+<vue-dd name="setupState" v-model="instance.setupState" :deep="false" max-height="300px" />
 ```
-
+> In the example above `:deep="false"` means, disable deep watching. Deep watching is `true` by default, but watching Vue instance or `instance.setupState` deeply can create a flood of Vue.js warnings because we start watching Vue itself. To prevent flooding, set `:deep="false"` otherwise that is optional
 ## About
 The component renders object as a tree that can be expanded to display nested values, very similar to inspecting JavaScript objects using the Developer Tools, but with full reactivity & advanced UI and UX designed specifically for ease of use and joy for the developer.
 

vue-dd/src/NodeComplex.vue

@@ -587,7 +587,7 @@ export default {
     },
     longTextInline () {
 
-      let text = this.modelValue.substring(0, this.longText)
+      let text = this.modelValue.toString().substring(0, this.longText)
       text = this.escapeQuotesFn(text)
       text = `"${text}..."`
 

vue3/src/components/VueDdTest.vue

@@ -66,7 +66,7 @@ const set = reactive(new Set())
   Window object displayed:
   <br />
   dark: <base-checkbox v-model="dark" /><br />
-  <vue-dd name="setupState" :dark="dark" v-model="instance.setupState" max-height="300px" :deep="false" />
+  <vue-dd name="setupState" :dark="dark" v-model="instance.setupState" :deep="false" max-height="300px" />
 <!--  <vue-dd name="test" delimiter="$" :dark="dark" v-model="bool" />-->
 <!--  <vue-dd name="ref" :dark="dark" v-model="text" />-->
 <!--  <vue-dd name="refObject" :dark="dark" v-model="refObject" />-->