v-bind:style for dynamical value in Vue.js

As described you should use an computed property for the style.
This one will also auto reflect any changes of props.
If you have some conditions you can also modify the values depending on that in the computed callback function. I've added an example with darkmode to make this approach clear.

export default {
  data(){ return {
        selected_title_color1:'',
        titleColor1:'',
        colors:['紅色','藍色','黃色','粉色','土地色','水藍色','灰色','淺綠色','橙色'],
        colors_dic:{紅色:'red',藍色:'blue',黃色:'yellow',粉色:'pink',土地色:'blawn',水藍色:'aqua',灰色:'gray',淺綠色:'palegreen',橙色:'orange'},
        modalVisible1: true,
        darkmode: false, // example value
  }},

  watch:{
    selected_title_color1: function () {
      this.titleColor1 = this.colors_dic[this.selected_title_color1];
    }
  },

  computed: {
     // Here comes your style magic.
     // Return an Object that you will bind to the style prop.  
     // Changes to any reactive value will be reflected directly.  
     style(){
        // create the base style here.        
        let newStyle = {}

        // apply your titleColor1 which results in style="{color:titleColor1}"
        if(this.titleColor1){
          this.color = this.titleColor1
        }

        // if you would have more conditions you can add them here, too
        // just an _example_ if you would have a darkmode value in data.
        if(this.darkmode){
          this.backgroundColor = '#222222'
        }          ​
            ​
       ​return newStyle
    ​}
 ​},

 ​methods: {
    ​// rest of methods if 
 ​}
}

and then attach it to your div with :style="style".

<div class="l-modal" v-if="modalVisible1">
     ​<div class="p-modal" @click="hide_modal" :style="style" ref="test">
       ​<p>{{titleTxt1}}</p>
       ​<p>{{contentTxt1}}</p>
       ​<p>{{endTxt1}}</p>
       ​<button class="p-modal__btn">{{buttonTxt1}}</button>
     ​</div>
</div>
<div class="l-modal__bg" v-if="modalBgVisible1" @click="hide_modal"></div>

Tip from my side. I would outsource the code for setting the color and bind the method to an event that changes the color instead of using an watcher. This can make your app a bit more flexible and cleans it up. But the way you've done it works, too.

Check following snippet please, it look like everything works fine:

new Vue({
  el: "#demo",
  data () {
      return {
        selected_title_color1:'',
        titleColor1:'',
        colors:['紅色','藍色','黃色','粉色','土地色','水藍色','灰色','淺綠色','橙色'],
        colors_dic:{紅色:'red',藍色:'blue',黃色:'yellow',粉色:'pink',土地色:'blawn',水藍色:'aqua',灰色:'gray',淺綠色:'palegreen',橙色:'orange'},
        modalVisible1: true,
      }
  },
  watch:{
    selected_title_color1: function () {
      this.titleColor1 = this.colors_dic[this.selected_title_color1];
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="l-modal" v-if="modalVisible1">
      <div class="p-modal" :style='{ color : titleColor1 }' ref="test">
        <p>{{ titleColor1 }} - {{ selected_title_color1 }}</p>
      </div>
</div>
<select v-model="selected_title_color1">
  <option value="" disabled>Select color</option>
  <option v-for="option in colors" v-bind:value="option">
    {{ option }}
  </option>
</select>
</div>