Tooltip mixin doesn't support multiple tooltips in the same Vue component

The Vue tooltip mixin doesn't support multiple tooltips in the same Vue component.

this.$refs.tooltip only represents a single element and is holds the latest ref="tooltip" in the DOM for a given component.

In this example, only bar will get a tooltip

<script>
import tooltipMixin from '../../vue_shared/mixins/tooltip';

export default {
  mixins: [
    tooltipMixin,
  ],
};
</script>
<template>
  <div
    title="fooooooooooooooooooooooo"
    ref="tooltip">
    foo
  </div>
  <div
    title="baaaaaaaaaaaaaaaaaaarrrr"
    ref="tooltip">
    bar
  </div>
</template>

---

Current usage with multiple tooltips that is broken:

• pipeline_url, https://gitlab.com/gitlab-org/gitlab-ce/blob/97d6085fb507d53f92699d5cfea06dd319125994/app/assets/javascripts/pipelines/components/pipeline_url.vue#L49
• job_component has multiple but only one of the elements is shown at a time. I suspect if the data changed to not have a path, the tooltip wouldn't show, https://gitlab.com/gitlab-org/gitlab-ce/blob/97d6085fb507d53f92699d5cfea06dd319125994/app/assets/javascripts/pipelines/components/graph/job_component.vue#L84
• Need to use this in issue_token, https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1816#note_31261056

---

We could workaround and use the existing mixin code by creating new Vue components to nest in order to get a new fresh namespace.

---

cc @filipa