title: v-on:click not working on button when clicking it's content in bootstrap-vue
body: <p>I have created in my vue component the following template</p>
  
  <pre><code>                &lt;b-button v-on:click="check($event)" class="btn btn-success" data-action="consent"&gt;
                      &lt;b-icon-check&gt;&lt;/b-icon-check&gt;
                  &lt;/b-button&gt;
  </code></pre>
  
  <p>However the click event only seems to work if I click on the button itself, for example on the sides around the icon, and not when clicking on the icon itself.</p>
  
  <p>I'm wondering if there's a better way to do what I want to achieve instead of adding another v-on:click on the icon itself. </p>
  
  <p>Basically I want the button to trigger the click event even if any subelement it has is clicked.  </p>
  
  <p><a href="https://i.stack.imgur.com/7IyUj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7IyUj.png" alt="enter image description here"></a></p>
  
  <p>Here's the function check(event)</p>
  
  <pre><code>    methods:{
          check(event){
              let action = event.target.getAttribute('data-action');
              if(action === 'consent'){
                  this.checked = true;
              }
              else{
                  this.checked = false;
              }
          }
      },
  </code></pre>
  
  <p>After reading the comments and the link for modifiers, I think my mistake is assuming that the <code>event.target</code> is going to be the button. Instead it's the icon itself that's why my code is failing.</p>