Change protected branches selector internals

What does this MR do and why?

Change protected branches selector internals to prioritize selectedBranch and selectedBranchNames. The latter has been recently added for components that do not have branches objects as a whole.

protected branches selector has been used based on selectedBranch in both rule_form and form which implies that the parent component has the branch objects as a whole.

This MR extends it to also use selectedBranchNames for those components which might only have the name of the selected branches. This is a scenario could be from components dealing with CI or Yaml based configuration which only contain the name of the selected branch.

This proposes the usage as the following (with the only difference being the selected-branches-names):

// branchesToAdd would change from other instances by updating rule.branches with the name of the selected branch only.

<protected-branches-selector
  v-model="branchesToAdd"
  :project-id="projectId"
  :is-invalid="!isValidBranches"
  :selected-branches-names="rule.branches"
/>

This came up as I was working through #351166 (comment 822742714)

Screenshots or screen recordings

There is no visual change (Approval rules however are an example of it):

How to set up and validate locally

1. Project Settings -> General
2. Enable any rule under Merge Request Approvals
3. Target branch will visible under any of them

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.