Event handling in EmberJS components using blocks

I've been working on a UI in Ember and I am having difficulty implementing some of the event handling as described on the documentation here

I have a section of a nav bar I need to highlight on hover. The nav bar is made up of ember-bootstrap components.

    

<div class="container-fluid" style="padding-left:50px;padding-right:50px; ">
    <a class="navbar-brand" href="#"><img style="max-width:250px; margin-top: -12px;margin-bottom: -12px" src="/assets/images/logo_white_3x.png"></a>
    
        
            
                LIVE
            
        
    
    <div class="navbar-nav mr-left">
        
            
                " as |dd|}}
                    Link<span class="caret"></span>
                        
                            Link
                            Link
                        
                
                
                    Current User: <b>MICKEY MOUSE</b>
                
            
        
    </div>
</div>

To accomplish this I tried to use one of the block events described n the documentation:

 //template
 
  <h1>link</h1>
 

//component
export default Component.extend({
  hover() {
    alert('hovered')
  },
  actions: {
      //actions here
  }
});

This produces the following error: hover not found, and the catch-all block handler didn't handle it

I thought it might be because the name of the even must be hyphenated so changed it accordingly. This produced a no component or helper by that name error.

Copying and pasting the same text from the guide produces the same errors which suggests there is something more fundamental I am not understanding.

Can anyone shed any light?