You'd have to do JSON.parse(conversations.messages[0]).text. This way you parse the object inside messages and have access to its properties.

I am not good with vue. But from you code I can say you have issue with objects. You cann't access to value with dot notation if value name is invalid javascript variable name. Use it like this.

<ul id="Nodes">
 <li v-for="node in json.Nodes">
  {{ node['@type'] }}
  {{ node['@group'] }}
  {{ node['@name'] }}
 <li v-for="item in node.Items">
  {{ item['@name'] }}
  {{ item['@defaultValue'] }}
  {{ item.['@expression'] }}
  {{ item.['@format'] }}
 </li>
 </li>
</ul>

Well, you will have to add the code that you have written for Vue

If you are in a vue app, you can do something like this

<script>
      import json from './json/data.json'
      export default{
          data(){
              return{
                  myJson: json
              }
          }
      }
</script>

and if you are writting it inside an html page. you can do it in 2 steps.

1st is to add the file link as a script

<script src="../file.json"></script>

then in the vue script section you can assign it to the data object.

var ele = new Vue({
     el : "#YourElement", 
    data : ObjName
});

"ObjName" is a name of the json object in the file.

ObjName :
{
"data": [
    [
        {
           "account_id": "  "
           "account_name": "   "
        }

You need to bind the value to the component as dynamic and not static. So change your blade file to:

@extends('layouts.app')

@section('content')
    <!-- see the colon in front of the props, that is a shortcut for v-bind:prop-name -->
    <my-profile :user-details="{{ json_encode($userDetails) }}"></my-profile>

@endsection

Otherwise are all values passed to the component as a simple string.

The issue that you currently have is that you are not updating the internData from the transformData function youe should reassign internData with JSON parsed format of same inside the function just like below

transformData() {
  this.internData = JSON.parse(this.internData);
}

OR

You could make transformData as a computed property and watch for the type of transformData. Here you can get rid of the click event to parse the data.

new Vue({
  el: "#app",
  data() {
    return {
      datatype: "foo",
      internData: "[1, 2, 3]",
    };
  },
  methods: {
    whatFormat() {
      console.log(this.transformData);
      console.log(typeof this.transformData);
    }
  },
  computed: {
    transformData: function () {
      return JSON.parse(this.internData)
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="internData" />
  <button type="button" @click="whatFormat">what data type</button>
</div>

You are getting that error because on initial load, your resultls is an empty string. You can change it to be a blanket empty json so it will parse properly and will be updated in watch.

resultsLi = new Vue({
  el: '#result-list',
  data: {
    resultls: "{}",
    json: []
  },
  mounted: function () {
   .....
}

use this code:

<div id="vueapp">
  <textarea v-model="jsonstr" rows="8" cols="40"></textarea>
  <pre>{{ jsonstr | pretty }}</pre>
</div>

and JS:

new Vue({
  el: '#vueapp',
  data: {
    jsonstr: '{"id":1,"name":"A green door","price":12.50,"tags":["home","green"]}'
  },
  filters: {
    pretty: function(value) {
      return JSON.stringify(JSON.parse(value), null, 2);
    }
  }
})