vue中如何将 json 格式化展示在页面中？

<script setup lang="ts">
    import { ref } from "vue";
        const jsonValue2 = ref("{a:1,b:2}");
    const jsonValue3 = ref({ a: 1, b: 2 });
</script>        
<template>
        <h3>插值展示 json 字符串</h3>
    <div>{{ jsonValue2 }}</div>
    <pre>{{ jsonValue2 }}</pre>
    <br />
    <h3>v-html展示 json 字符串</h3>
    <div v-html="jsonValue2"></div>
    <pre v-html="jsonValue2"></pre>
    <br />
    <h3>插值展示 json 对象</h3>
    <div>{{ jsonValue3 }}</div>
    <pre>{{ jsonValue3 }}</pre>
    <br />
    <h3>v-html展示 json 对象</h3>
    <div v-html="jsonValue3"></div>
    <pre v-html="jsonValue3"></pre>
    <br />
</template>