Vue refs

@kreierson This may be your issue:

$refs are only populated after the component has been rendered, and it is not reactive. It is only meant as an escape hatch for direct child manipulation - you should avoid using $refs in templates or computed properties.

https://vuejs.org/v2/guide/components.html#Child-Component-Refs

ref is used in creating a component. So your input needs to be wrapped in a Vue component.

<script type="text/x-template" class="mylistbox" id="listbox-template">
  <div class="complist">
    <div class="title-list_box">{{header}}</div>
    <select class="mylistbox" v-model="selected" v-on:change="onListSelect" v-on:keydown="onKeyDown"
      v-on:keyup="onKeyUp" id="list_box" :size="size" :multiple="multi ? '' : null">
      <option v-for="opt in selectOptions"
      v-bind:value="opt">{{opt.text}}</option>
  </select>
  </div>
</script>

<template id="my-listbox-proxy">
    <mylistbox :id="id" :group="group" :size="size" :doselect="doselect" :parent="parent" :multi="multi" ref="'id'">
</template>

This lets me dynamically set the ref for a Vue component. Once you have a ref you gain access to the Vue components instance (vars, methods). Classes are dynamically manipulated differently in Vue. See the reference guide.

Basically what I am trying to do is port this clockpicker https://weareoutman.github.io/clockpicker/ over to a vue component.

<template>
        <input
            ref="picker"
            type="text"
            class="form-control clockpicker"
            :value="time">
</template>
<script>
    export default {
        props: ['time'],
        mounted: function() {
           this.$refs.picker.clockpicker({
                twelvehour:true,
                donetext: 'Done'
            });
        }
    }
</script>

If I console.log(this.$refs.picker) I get a string representation of the input ""

So @ejdelmonico , this seems to show that the $refs are available at this point.

if I put an id on the input and console.log($('#input')) I actually get the object back so I can initialize the clockpicker.

I am wanting to initialize the clockpicker without the use of Jquery so I can re-use it in my project.

$refs point to Vue components. clockpicker is dependent on JQuery. If you want to port it you have to make it an actual Vue component. Or just use JQuery in your Vue app, its easily done. But JQuery components will not show up in your $refs array unless it is wrapped into Vue component.