Я бы предложил сделать так:

<script>
    export default {
        props: [
            'api'
        ],
        data: function() {
            return {
                localApiData: this.$props.api,
            };
        },
        methods: {
            btnType: function (type) {
                if (type === 'post' || type === 'POST') return 'btn-primary';
                if (type === 'get' || type === 'GET') return 'btn-success';
                if (type === 'put' || type === 'PUT') return 'btn-warning';
                if (type === 'delete' || type === 'DELETE') return 'btn-danger';
            },
            borderType :function(type){
                if (type === 'post' || type === 'POST') return 'border border-primary';
                if (type === 'get' || type === 'GET') return 'border border-success';
                if (type === 'put' || type === 'PUT') return 'border border-warning';
                if (type === 'delete' || type === 'DELETE') return 'border border-danger';
            },
            listType: function (type) {
                if (type === 'post' || type === 'POST') return 'list-group-item-primary';
                if (type === 'get' || type === 'GET') return 'list-group-item-success';
                if (type === 'put' || type === 'PUT') return 'list-group-item-warning';
                if (type === 'delete' || type === 'DELETE') return 'list-group-item-danger';
            },
            toggleRequest(request) {
                request.isShow = !request.isShow;
            }
        },
        created: function () {
            this.localApiData.forEach((apiItem) => {
                apiItem.requests.forEach((requestItem) => {
                   this.$set(requestItem, 'isShow', false)
                });
            });
        }
    }
</script>

То есть объявить локальные данные, на основе входных. В документации тоже об этом пишут.

Да, конечно.