環境

Vue.js 6.12.0
PHP 7.3.10
Laravel 6.5.0
MariaDB

やりたいこと

MariaDBのに下記のようなデータが格納されていてそれをLaravelのAPIで取得する。
その内のcontentカラム（JSON型）のデータからdata_kindの値を判断基準として条件分岐を行い、
valueの内容である「テストの内容です🐾」や「赤文字で強調する！！」や円周率をVueので表示する為にJSONをパースする

id	content	del_flg
1	{"data_kind": "1", "value": "テストの内容です🐾"}	0
2	{"data_kind": "2", "value": "赤文字で強調する！！"}	0
3	{"data_kind": "3", "value": "円周率を表示"}	0
4	{"data_kind": "4", "value": "削除済み😭😭😭"}	1

やったこと

下に全体で色々書いてますが一番重要なのは下記のパース部分です
これが無いとJSONではなくJSONの形をしたただの文字列としてデータが扱われるので値を取り出すことができません

          // 取得データをforEachで全てJSON.parseにかける
          res.data.recordList.forEach(value => {
            value["content"] = JSON.parse(value["content"]);
          });

全体

Hoge.vue

// テンプレ部分
<template>
  <section class="container">

    <div v-for="data in tableData" :key="content.id">
      <!-- 通常表示 -->
      <div v-if="data.content.data_kind === '1'">{{ data.content.value }}</div>
      <!-- クラスを付けて装飾を変更 -->
      <div v-else-if="data.content.data_kind === '2'" class="redBold">{{ data.content.value }}</div>
      <!-- 円周率を表示 -->
      <div v-else-if="data.content.data_kind === '3'">3.141592653589323846....</div>
    </div>

  </section>
</template>

// データ取得とパース部分
<script>
export default {
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    getContent() {
      axios
        .get("/api/getContent", {
          params: {
            delFlg: 0
          }
        })
        .then(res => {
          // 取得データをforEachで全てJSON.parseにかける
          res.data.recordList.forEach(value => {
            value["content"] = JSON.parse(value["content"]);
          });
          this.tableData = res.data.recordList;
        });
    }
  },
  mounted() {
    this.getContent();
  }
};
</script>

// 装飾
<style lang="sass" scoped>
.redBold
  color: red
  font-weight: bold
</style>