IntelliJ continues to remove backlinks from JavaScript template string

Question

I want to put "reverse steps" around the lines.

IntelliJ keeps deleting them every time I try to wrap them around a string.

Has anyone understood why this is happening and how to solve it?

I added a small snippet of code to my .vue file where the problem occurred. Imagine html, js and css written in one component (.vue), separated by unqiue labels (template, script and style tag). I am using a German keyboard layout with a Mac OS X 10.5+ keyboard layout.

import axios from "axios";
import 'vue-animate/dist/vue-animate.min.css';

export default {
  name: 'hello',
  data () {
    return {
      msg: `Service is <strong>ONLINE</strong> and <strong>READY</strong> to operate`,
      clicked: false,
      iconURL:"./../../static/img/meditate.svg",
      meditationAction: this.activateMeditation,
      backgroundImage: "",
      room:"Bad"

    }
  },
  methods:{
      activateMeditation () {
          this.clicked = !this.clicked;

          axios.get(`http://localhost:5005/${this.room}/shuffle/on`).then(response => {
              console.info("SUCCESSFULLY ACTIVATED SHUFFLE");

            axios.get(`http://localhost:5005/${this.room}/volume/20`).then(response => {
              console.info("SUCCESSFULLY SET VOLUME TO 20");

              axios.get("http://localhost:5005/bad/sleep/900").then(response => {
                console.info("SUCCESSFULLY SET SLEEP TIME TO 15 MINUTES");

                axios.get("http://localhost:5005/bad/playlist/med").then(response => {
                  console.info("SUCCESSFULLY SET PLAYLIST TO MED");
                  this.iconURL = "./../../static/img/stop.svg";
                  this.meditationAction = this.pausePlayback;

                  axios.get("http://localhost:5005/bad/state").then(response => {
                    console.info("SUCCESSFULLY RETRIEVED STATE");
                    console.log(response);
                    //FIXME: USE IMAGE OF CURRENT TRACK INSTEAD OF NEXT TRACK
                    this.backgroundImage = response.data.nextTrack.absoluteAlbumArtUri;
                  })
                  .catch((error)=>{
                    console.log(error);
                  });

                })
                .catch((error)=>{
                  console.log(error);
                });

              })
              .catch((error)=>{
                console.log(error);
              });

            })
            .catch((error)=>{
              console.log(error);
            });

          })
          .catch((error)=>{
            console.log(error);
            this.iconURL = "./../../static/img/attention.svg";
            this.meditationAction = this.resetButton;
          });


      },

    pausePlayback() {

      axios.get("http://localhost:5005/bad/pause").then(response => {
        console.info("SUCCESSFULLY PAUSED PLAYBACK");
        this.iconURL = "./../../static/img/meditate.svg";
        this.meditationAction = this.activateMeditation;
        this.backgroundImage = "";
      })
      .catch((error)=>{
        console.log(error);
      });

    },

    resetButton() {

      this.iconURL = "./../../static/img/meditate.svg";
      this.meditationAction = this.activateMeditation;

    }



  }
}

 * {

    box-sizing: border-box;
  }

  .logo {
    max-width:50%;
  }

  .svg {
    height:5em;
    z-index:100;
  }

  .option .svg .st0 {
    fill: white;
    stroke: white;
  }

  .options__container {
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;


  }

  .option {

    display:flex;
    justify-content: center;
    align-items: center;
    height:3em;
    width:3em;

    position:relative;

    background-size:cover;

    padding:3em;
    border-radius:100%;
    background-color:white;
    border-top:3px solid black;
    border-bottom:5px solid #303030;
    border-left:3px solid black;
    border-right:7px solid #303030;



    transition: all 300ms ease-in;

  }

  .option__background-image {


    position:absolute;
    background-color:white;
    opacity:0.8;
    top:0;
    left:0;
    height:100%;
    width:100%;
    border-radius: 100%;
  }

  .option:hover {

    border:3px solid black;

  }

  <div class="hello">
    <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/1/10/Sonos_2015-Logo.png"/>
    <h2 v-html="msg"></h2>
    <div class="options__container">
      <a class="option" v-on:click="meditationAction" v-bind:class="{'animated flash' : clicked}" :style="{backgroundImage: 'url(' + backgroundImage +')'}" >
        <div class="option__background-image" ></div>
        <img class="svg" :src=iconURL>
      </a>
    </div>
  </div>

Run codeHide result