vue编写panel组件，带tools如何拆分

Question

我使用vue.js模仿easyui的panel面板（tools是，最大化，最小化，关闭，折叠）
这是效果图：

现在有个问题，就是点击"折叠按钮"，需要修改props里面collapsed为true，但是vue2里面不能直接修改props。现在有什么解决办法？是把tools拆分成子组件吗？

组件使用代码：

            <cy-panel :closed.sync="panel2.closed" title="这里是标题" icon="chat" :collapsible="true" :minimizable="true" :maximizable="true" :closable="true" style="height:200px;">
                <div slot="body">标题带图标</div>
            </cy-panel>

组件代码

<template>
<div class="cywebos-panel" v-show="!closed">
    <div class="cywebos-panel-header" v-if="title">
        <div class="cywebos-panel-icon" v-if="icon">
            <icon v-if="icon" :type="icon"></icon>
        </div>        
        <div :class="['cywebos-panel-title', icon ? 'panel-with-icon' : '']">
            {{title}}
        </div>
        <div class="cywebos-panel-tool">
            <slot name="tools"></slot>
            <i :class="['cywebos-panel-tool-collapse', collapsed ? 'cywebos-panel-tool-expand' : '']" @click="handleCollapseClick" v-if="collapsible"></i>
            <i class="cywebos-panel-tool-min" v-if="minimizable"></i>
            <i class="cywebos-panel-tool-max" v-if="maximizable"></i>
            <i class="cywebos-panel-tool-close" v-if="closable"></i>
        </div>
    </div>
    <div :class="['cywebos-panel-body', !title ? 'cywebos-panel-body-noheader' : '']">
        <slot name="body"></slot>
    </div>
    <div class="cywebos-panel-footer" v-if="$slots.footer">
        1212
    </div>
</div>
</template>

<script>
import Icon from '../icon';
import velocity from 'velocity-animate';

export default {
    components: {
        Icon
    },
    props: {
        width: {
            type: String,
            default: 'auto'
        },
        height: {
            type: String,
            default: 'auto'
        },
        title: {
            type: String,
            default: ''
        },
        icon: {
            type: String,
            default: ''
        },
        collapsible: {
            type: Boolean,
            default: false
        },
        minimizable: {
            type: Boolean,
            default: false
        },
        maximizable: {
            type: Boolean,
            default: false
        },
        closable: {
            type: Boolean,
            default: false
        },
        closed: {
            type: Boolean,
            default: false
        },
        collapsed: {
            type: Boolean,
            default: false
        },
        minimized: {
            type: Boolean,
            default: false
        },
        maximized: {
            type: Boolean,
            default: false
        }
    },
    methods:{
        resize(){

        },
        handleCollapseClick() {
            this.collapsed = true;
        },
        collapse() {
            let body = this.$el.querySelector('.cywebos-panel-body');
            velocity(body, 'slideUp', {
                duration: 240,
                easing: 'easeInOutQuad'
            });
        },
        expand() {

        }
    },
    watch: {
        collapsed(val){
            val ? this.collapse() : this.expand();
        }
    },
    mounted() {

    }
}
</script>