Javascript добавить стиль в innerhtml

Question

У меня есть следующий html

     <div class="product-image1" v-hover-layer>
          <div class="layer" style="text-align: center;margin-top: 30%">
             <a href="/"> View Product </a>
         </div>
     </div>

Итак, в моей директиве vuejs2

Vue.directive('product-hover', {
   bind:  (el)=> {
     var layer = el.getElementsByClassName('layer');
    if(layer.length > 0){
        //hide the layer
        layer[0].style.display="none";
    }
    // Focus the element
    el.addEventListener("mouseover", event => {
        layer[0].setAttribute("style","color:white;display:block;background-color:#267B53;width:100%;height:100%;background-position:center;opacity:0.3");
    });

    el.addEventListener("mouseout", event => {
        layer[0].el.setAttribute("style","display:none");
    });
},
unbind:(el)=>{
    el.removeEventListener('mouseover')
}

});

То, чего я жду, это добавитьстиль

    color:white;display:block;background-color:#267B53;width:100%;height:100%;background-position:center;opacity:0.3

Но теперь я получаю сообщение об ошибке Не могу прочитать свойство 'setAttribute' из неопределенного

Как установить класс слоя в стиле