这是我的剧本

<script>
import axios from "axios";
export default {
  data() {
    return {
      responseObject: {}
    };
  },
  async mounted() {
    try {
      let response = await axios.get("http://localhost:4000/api/blogs");
    this.responseObject = response.data;
    } catch (e) { 
    }
  },
};
</script>

这是我的responseObject json

responseObject: {
        resource: "services",
        status: "success",
        data: [
          {
            service_id: "0001",
            service_name: "Buy Airtime",
            service_type: "airtime",
          },
 {
            service_id: "0002",
            service_name: "Buy Data",
            service_type: "Data",
          },
        ],
      },

这是我的模板，我使用{{service}}获取整个JSON

<ul>
      <li v-for="service in  responseObject" :key="service.service_id">
        {{ service }}
      </li>
    </ul>

请问我怎么能循环通过数据和得到他们中的任何一个

service_name: "Buy Airtime",
service_type: "airtime",

我试过了

{{servive.service_name}}

但它不返回任何内容