JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  <h3>
  try input any json format data 
  </h3>
  <div style="display: inline-flex">
    <textarea style="width:200px;height:300px;white-space: pre-wrap;" 
          :value="JSON.stringify(myData,null,4)"
          @blur="myData=JSON.parse($event.target.value)"></textarea>
    <div style="margin-left:10px">
      <input type="button" value="edit mode" @click="editable=!editable"/>
       <div>
         <v-json-editor
               :data="myData"
               :editable="editable"
               @change="$forceUpdate()"></v-json-editor>
        </div>
    </div>
  </div>
</div>

JavaScript

Vue.use(vue_json_editor_block_view.default)
console.log(JSON.stringify(vue_json_editor_block_view))
console.log(vue_json_editor_block_view)
new Vue({
    el:'#app',
    data:{
      editable: false,
   		myData: {
        "name": "leo",
        "country": "cn",
        "jobs": [
            "student",
            "qa",
            "developer",
            "unknow",
            "type [] in value field to transfer to array block"
        ],
        "this is a object": {
            "how": "type {} in value field to transfer to object block"
        }
			}
    }
})