Vue在點擊內部元素時（獲得焦點），怎樣讓外部div元素樣式變化？

問題：

div內部有很多元素，div、 p、 span 、input等，各元素有嵌套，現在點擊某元素時需要最外面這個div邊框高亮，例如，點擊了input開始輸入

假設html 結構如下

 <div>
    <p>最外部div高亮測試</p>
    <div>用vue如何實現選中下面這個input最外面的div邊框會高亮<br/>
    <input type=text placeholder="請輸入內容"/>
    </div>
 </div>

解決要點

1. div要獲得焦點，需要設置tabindex這個屬性，值為-1（可以獲得焦點事件，但不能用tab鍵選中，tabindex>=0時可以，這里設置為-1即可）

2.檢測focusin和focusout事件並改變div的class(focus並不會向父級傳播）

在線演示代碼

https://jsfiddle.net/f4rzn85o/3/