Link-to route but render it into current routes outlet

In my scenario I have an items route with a item nested route that looks like

this.route('items',function(){
    this.route('item',{path:':item_id'});
});

This nested route renders a component that slides overtop of the content of the parent route so you can swipe it away. I have another route called watch-list that displays items similar to items but has more items being shown, I want the same behavior as how item renders a component that slides overtop of the parent content to it can be swiped away. But if I link to items.item it leaves this route to go over to items so that the item route does the slide over animation thing. So to get around that I added an item nested route to watch-list like so

this.route('watch-list',function(){
    this.route('item',{path:':item_id'});
});

Which does the same thing as items and items.item so now it renders the same component that items.item does and does my sliding animation overtop of the parent watch-list content. The issue is now I have two routes that show single items and I really want to have items.item be my single item route no matter where the list of items that linked to it lives.

Is there a way I can link-to items.item to show a single item, and have the URL change to reflect that, but have it render inside my watch-list route so that the single item component will slide over top of the watch-list content and not go and render items first?

Also here is what each template more or less looks like hopefully for some better clarity

// items template
{{#each sortedItems key="id" as |item|}}
    {{#link-to "items.item" item}}
        ...
    {{/link-to}}
{{/each}}
{{outlet}}

// items.item template
{{item-component item=model}}

Watch list is the same layout so I get the same effect

// watch-list template
{{#each sortedItems key="id" as |item|}}
    {{#link-to "watch-list.item" item}}
        ...
    {{/link-to}}
{{/each}}
{{outlet}}

// watch-list.item template
{{item-component item=model}}