ember-cli-swiper - updating issue

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.swiper-slide {
  height: 50px;
}

.swiper-slide:nth-child(1) {
  background: yellow;
}

.swiper-slide:nth-child(2) {
  background: orange;
}

.swiper-slide:nth-child(3) {
  background: red;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<button onclick={{action (mut hideFirstSlide) true}}>hide first slide</button>
<button onclick={{action (mut hideSecondSlide) true}}>hide second slide</button>
<button onclick={{action (mut showThirdSlide) true}}>show third slide</button>
<br>
{{#swiper-container}}
	{{#unless hideFirstSlide}}
  	{{#swiper-slide}}first slide{{/swiper-slide}}
  {{/unless}}
  {{#unless hideSecondSlide}}
  	{{#swiper-slide}}second slide{{/swiper-slide}}
  {{/unless}}
  {{#if showThirdSlide}}
  	{{#swiper-slide}}third slide{{/swiper-slide}}
  {{/if}}
{{/swiper-container}}
<br>
<i>Please rerun twiddle before you try to reproduce issues.</i>
<ul>
  <li>Newly added slide is not accessable.
    <ol>
      <li>Click "show third slide" button.</li>
      <li>Swipe to third slide.</li>
    </ol>
  </li>
  <li>An empty slide remains after removing one.
    <ol>
      <li>Click "hide second slide" button.</li>
      <li>Swipe to the right.</li>
    </ol>
  </li>
</ul>

Note: Everything is fine if you remove same amout of slides as you add. Just give it a try by removing second slide and showing third slide.

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-cli-swiper": "0.7.4"
  }
}