Ember Js: Error when navigating between dynamic segment of a same route (Failed to excecute 'insertBefore')

I get an error when navigating between dynamic segment of the same route for example when I navigate between /project/my-project/ to /project/my-project/gallery everything works fine.

But when I navigate from /project/my-project/ to /project/my-other-project or /project/my-project/gallery to /project/my-other-project

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

This is part of my application route structure

which is written in router.js like this

this.route('project', {path: '/project/:seo_url'}, function() {
 this.route('gallery');
});

this is what i wrote in project.hbs

<Project::Banner @title="" @image="assets/images/projects/project-banner.jpg"/>
<section>
    <div class="container">
        <div class="tabs has-border-bottom">
            Description
            Gallery
            Error When I click this
        </div>
    </div>
</section>


<Home::ProjectSlider @title="Latest Projects" @projects=/>

Project::Banner and Home::ProjectSlider are components and I don't know if they are relevant to this problem.