Vue中的button組件是頁面開發中經常使用的元素之一。而關于button的寬度，很多開發者在使用過程中都會遇到一些問題。

常見的情況是，我們想要讓button的寬度自適應父元素的寬度，但是通過設置width為100%時卻不生效，出現了寬度只有內容寬度一半的情況。

這是因為button默認的盒模型是content-box，而設置為100%時，只是將內容寬度設置為了100%，邊框和內邊距并不會自適應父元素的寬度。解決這個問題的方法是把box-sizing的屬性值設置為border-box。

button{
box-sizing: border-box;
width: 100%;
}

這樣一來，button的寬度就會自動適應父元素的寬度，而不會出現只有內容寬度一半的情況了。

當然，如果我們想要讓button有一定的內邊距和邊框，可以通過外層套一個div來實現：

<div class="btn-wrapper">
<button>按鈕</button>
</div>
.btn-wrapper{
padding: 10px;
border: 1px solid #ccc;
}
button{
box-sizing: border-box;
width: 100%;
padding: 5px;
border: none;
}

這個時候，button的寬度是自適應父元素(btn-wrapper)的寬度，并且還有10px的padding和1px的邊框。

總結一下，關于Vue的button寬度問題，我們可以設置box-sizing的屬性值為border-box，并將寬度設置為100%來實現自適應父元素的寬度。如果要設置內邊距和邊框，可以通過外層套一個div來實現。