关于使用props控制confirm组件显示时出现的问题

老师您好，我按自己的思路想通过在index.vue中传值来控制confirm组件的显示，但是我发现我只能让它显示一次，点击取消后再点击清空搜索记录按钮就没有反应了，我在watch中也尝试过打印值，发现watch中的值只会打印一次，后面传入的props再发生变化它就没有响应了。附上代码，麻烦老师看看

<template>
<div class="confirm" v-if="control">
<div class="confirm-wrapper">
<div class="confirm-container">
<div class="confirm-top">
<p class="confirm-title">确定要清空吗?</p>
</div>
<div class="confirm-bottom">
<div class="confirm-left" @click="cancel">取消</div>
<div class="confirm-right" @click="confirm">确定</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
import {SEARCH_HISTORY_KEYWORD_KEY} from './config.js'
import storage from '@/assets/js/storage.js'
export default {
data() {
return {
control: this.confirmStatus,
}
},
props: {
confirmStatus: {
type: Boolean,
default: false
}
},
watch: {
confirmStatus(newval) {
this.control = true;
}
},
methods: {
cancel() {
this.control = false;
},
confirm() {
storage.remove(SEARCH_HISTORY_KEYWORD_KEY);
this.control = false;
this.$emit("confirm")
},
// show() {
//  this.control = true;
// }
}
}
</script>
<style type="text/css" scoped>
@import 'src/assets/scss/mixins';
.confirm {
&-wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: $search-z-index;
background: rgba(0,0,0, .5);
}
&-container {
position: absolute;
height: 170px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: $search-popup-z-index;
width: 80%;
background: #fff;
border-radius: 15px;
overflow: hidden;
}
&-top {
height: 130px;
}
&-title {
line-height: 130px;
text-align: center;
border-bottom: 1px solid #ccc;
font-size: 18px;
font-weight: bold;
}
&-bottom {
height: 40px;
}
&-left {
width: 50%;
text-align: center;
line-height: 40px;
float: left;
}
&-right {
width: 50%;
text-align: center;
line-height: 40px;
background: #f00;
color: #fff;
float: left;
}
}
</style>

<template>
<div class="search">
<div class="g-header-container">
<search-header></search-header>
</div>
<div class="g-content-container">
<search-scroll ref='scroll' :barStatus="false" :dragStatus="false">
<search-hot @hotDataGet="updateScroll"></search-hot>
<search-history @deleteAll="deleteAll" ref="history"></search-history>
</search-scroll>
</div>
<search-confirm :confirmStatus="confirmStatus" @confirm="confirm" ref="confirm"></search-confirm>
</div>
</template>
<script type="text/javascript">
import searchHeader from './header.vue'
import searchHot from './hot.vue'
import searchScroll from '@/base/scroll'
import loading from '@/components/loading'
import searchHistory from './history.vue'
import searchConfirm from './confirm.vue'
export default {
data() {
return {
confirmStatus: false
}
},
components: {
searchHeader,
searchHot,
searchScroll,
searchHistory,
searchConfirm
},
methods: {
updateScroll() {
this.$refs.scroll.update();
},
deleteAll() {
this.confirmStatus = true;
this.$refs.confirm.show();
},
// confirm() {
//  this.$refs.history.update();
// }
},
}
</script>
<style type="text/css" scoped>
@import 'src/assets/scss/mixins'
</style>